js原型繼承的兩種方法對比介紹
更新時(shí)間：2014年03月30日 14:25:16 作者：
這篇文章主要介紹了js原型繼承的兩種方法對比介紹,需要的朋友可以參考下
在實(shí)際的項(xiàng)目中，我們通常都是用構(gòu)造函數(shù)來創(chuàng)建一個(gè)對象，再將一些常用的方法添加到其原型對象上。最后要么直接實(shí)例化該對象，要么將它作為父類，再申明一個(gè)對象，繼承該父類。
而在繼承的時(shí)候有兩種常用方式，今天我們就來稍作探討
復(fù)制代碼 代碼如下:
//父類
function Person(name){
this.name = name;
};
// 子類
function Student(sex){
Person.apply(this,arguments); //繼承父類的構(gòu)造函數(shù)
this.sex=sex;
};
1，繼承Prototype：
復(fù)制代碼 代碼如下:
Student.prototype = Person.prototype; //執(zhí)行完此句時(shí)，Student.prototype.constructor 指向的是Person,為什么了？因?yàn)镻erson.prototype.constructor指向Person,對象的賦值實(shí)質(zhì)上是引用賦值，所以Student.prototype.constructor也指向Person
Student.prototype.constructor = Student; // 將Student.prototype.constructor 指回Person
用Person的原型對象來覆蓋Student的原型對象；前面說到對象的賦值實(shí)質(zhì)上是引用賦值，所以如果Student.prototype上的任何修改都會體現(xiàn)到Person.prototype中，即子類會影響父類。
看下面：
復(fù)制代碼 代碼如下:
Student.prototype.add=function(){alert("add")};
Person.prototype.add();//彈出add
2，繼承實(shí)例：
復(fù)制代碼 代碼如下:
Student.prototype = new Person(); //如果此處不傳遞參數(shù)，可以不寫（);即直接寫成 new Person;
2 Student.prototype.constructor = Student;
用Person的實(shí)例來覆蓋Student的原型對象；創(chuàng)建了實(shí)例，比起前面那種，顯示是浪費(fèi)內(nèi)存了，不過這同時(shí)也解決了上面那種方法的缺點(diǎn)，即此時(shí)Student.prototype上的任何修改不會體現(xiàn)到Person.prototype中，即子類不會影響父類。
3，利用控對象來組合1和2的優(yōu)點(diǎn)，去掉缺點(diǎn)
復(fù)制代碼 代碼如下:
var F = function(){};
F.prototype = Person.prototype;
Student.prototype = new F();
Student.prototype.constructor = Student;
F是個(gè)空對象，上面只有些原型方法，實(shí)例化時(shí)內(nèi)存占用較少，同時(shí)也隔離開了子類對父類的影響。
相關(guān)文章
這篇文章主要介紹了JS回到頂部，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
2008-01-01
這篇文章主要介紹了JavaScript刷新頁面的幾種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
本文給大家詳細(xì)講解了JavaScript中的字符集，以及字符集的編碼與解碼的相關(guān)知識，非常的細(xì)致，有需要的小伙伴可以參考下2017-02-02
javascript 基礎(chǔ)簡介 適合新手學(xué)習(xí)
在網(wǎng)絡(luò)或書籍所說的JavaScript大部分指客戶端JavaScript。2009-09-09
幾種經(jīng)典排序算法的JS實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獛追N經(jīng)典排序算法的JS實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-03-03
Javascript 動(dòng)態(tài)改變imput type屬性
這篇文章主要介紹了Javascript 動(dòng)態(tài)改變imput type屬性的相關(guān)資料,并附簡單實(shí)例代碼，需要的朋友可以參考下2016-11-11
下面講述的是自定義trim()函數(shù)遇到的問題，改進(jìn)的過程,建議在支持的瀏覽器中使用原生函數(shù)2013-04-04
javascript設(shè)計(jì)模式之工廠模式示例講解
這篇文章主要介紹了javascript設(shè)計(jì)模式中的工廠模式示例講解,需要的朋友可以參考下2014-03-03
淺析offsetLeft,Left,clientLeft之間的區(qū)別
這篇文章主要是對offsetLeft,Left,clientLeft之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下想，希望對大家有所幫助2013-11-11