js原型繼承的兩種方法對比介紹
在實際的項目中,我們通常都是用構(gòu)造函數(shù)來創(chuàng)建一個對象,再將一些常用的方法添加到其原型對象上。最后要么直接實例化該對象,要么將它作為父類,再申明一個對象,繼承該父類。
而在繼承的時候有兩種常用方式,今天我們就來稍作探討
//父類
function Person(name){
this.name = name;
};
// 子類
function Student(sex){
Person.apply(this,arguments); //繼承父類的構(gòu)造函數(shù)
this.sex=sex;
};
1,繼承Prototype:
Student.prototype = Person.prototype; //執(zhí)行完此句時,Student.prototype.constructor 指向的是Person,為什么了?因為Person.prototype.constructor指向Person,對象的賦值實質(zhì)上是引用賦值,所以Student.prototype.constructor也指向Person
Student.prototype.constructor = Student; // 將Student.prototype.constructor 指回Person
用Person的原型對象來覆蓋Student的原型對象;前面說到對象的賦值實質(zhì)上是引用賦值,所以如果Student.prototype上的任何修改都會體現(xiàn)到Person.prototype中,即子類會影響父類。
看下面:
Student.prototype.add=function(){alert("add")};
Person.prototype.add();//彈出add
2,繼承實例:
Student.prototype = new Person(); //如果此處不傳遞參數(shù),可以不寫();即直接寫成 new Person;
2 Student.prototype.constructor = Student;
用Person的實例來覆蓋Student的原型對象;創(chuàng)建了實例,比起前面那種,顯示是浪費內(nèi)存了,不過這同時也解決了上面那種方法的缺點,即此時Student.prototype上的任何修改不會體現(xiàn)到Person.prototype中,即子類不會影響父類。
3,利用控對象來組合1和2的優(yōu)點,去掉缺點
var F = function(){};
F.prototype = Person.prototype;
Student.prototype = new F();
Student.prototype.constructor = Student;
F是個空對象,上面只有些原型方法,實例化時內(nèi)存占用較少,同時也隔離開了子類對父類的影響。
相關(guān)文章
JavaScript?Hoisting變量提升機(jī)制實例解析
這篇文章主要為大家介紹了JavaScript變量提升Hoisting機(jī)制實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11Javascript中常見的校驗如域名、手機(jī)、郵箱等等
Javascript中常見的校驗如:驗證一般域名校驗,手機(jī)校驗,郵箱校驗,身份證校驗等等,下面是具體的實現(xiàn),感興趣的朋友可以參考下2014-01-01javascript基礎(chǔ)第一章 JavaScript與用戶端
javascript基礎(chǔ)第一章 JavaScript與用戶端2010-07-07JavaScript中循環(huán)遍歷Array與Map的方法小結(jié)
這篇文章主要介紹了JavaScript中循環(huán)遍歷Array與Map的各種方法,利用的都是js入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2016-03-03javascript如何創(chuàng)建表格(javascript繪制表格的二種方法)
利用js來動態(tài)創(chuàng)建表格有兩種格式,appendChild()和insertRow、insertCell()。兩種方式其實差不多,但第一種有可能在IE上有問題,所以推薦大家使用第二種方法,看下面的解決和使用方法2013-12-12JavaScript中splice與slice的區(qū)別
本文給大家分享的是JavaScript中的splice和slice的用法和區(qū)別,slice()方法和splice()方法都是原生js中對數(shù)組操作的方法,下面我們來詳細(xì)探討下2017-05-05怎樣在JavaScript里寫一個swing把數(shù)據(jù)插入數(shù)據(jù)庫
在JavaScript里寫一個swing來實現(xiàn)確定取消,來決定是否執(zhí)行這個功能 控制把數(shù)據(jù)插入數(shù)據(jù)庫,接下來介紹實現(xiàn)方法2012-12-12Javascript模塊化編程(三)require.js的用法及功能介紹
這個系列的第一部分和第二部分,介紹了Javascript模塊原型和理論概念,今天介紹如何將它們用于實戰(zhàn)。我采用的是一個非常流行的庫require.js感興趣的朋友可以了解下啊2013-01-01JavaScript高級程序設(shè)計(第3版)學(xué)習(xí)筆記 概述
在JavaScript面世之初,沒有人會想到它會被應(yīng)用的如此廣泛,也遠(yuǎn)比一般人想象中的要復(fù)雜強(qiáng)大的多,在我自己學(xué)習(xí)的過程中,曾經(jīng)有過多次震撼2012-10-10