javascript原型鏈學習記錄之繼承實現(xiàn)方式分析
本文實例講述了javascript原型鏈學習記錄之繼承實現(xiàn)方式。分享給大家供大家參考,具體如下:
在慕課網(wǎng)學習繼承的筆記:
繼承的幾種方式:
① 使用構造函數(shù)實現(xiàn)繼承
function Parent(){
this.name = 'parent';
}
function Child(){
Parent.call(this); //在子類函數(shù)體里面執(zhí)行父類的構造函數(shù)
this.type = 'child';//子類自己的屬性
}
Parent.call(this),this即實例,使用this執(zhí)行Parent方法,那么就用this.name = 'parent'把屬性
掛載在了this(實例)上面,以此實現(xiàn)了繼承。
缺點:以上只是讓Child得到了Parent上的屬性,Parent的原型鏈上的屬性并未被繼承。
② 使用原型鏈實現(xiàn)繼承
function Parent(){
this.name = 'parent';
}
function Child(){
this.type = 'child';
}
Child.prototype = new Parent();
解釋:Child.prototype === Chlid實例的__proto__ === Child實例的原型
所以當我們引用new Child().name時,Child上沒有,然后尋找Child的原型child.__proto__即Child.prototype即new Parent(),Parent的實例上就有name屬性,所以Child實例就在原型鏈上找到了name屬性,以此實現(xiàn)了繼承。
缺點:可以看出,Child的所有實例,它們的原型都是同一個,即Parent的實例:
var a = new Child(); var b = new Child(); a.__proto === b.__proto__; //true
所以,當使用 a.name = 'a'重新給name賦值時,b.name也變成了'a',反之亦然。
用instanceof和constructor都無法確認實例到底是Child的還是Parent的。
③ 結合前兩種取長補短
function Parent(){
this.name = 'parent';
}
function Child(){
Parent.call(this);
this.type = 'child';
}
Child.prototype = new Parent();
缺點:在Child()里面用Parent.call(this);執(zhí)行了一次Parent(),然后又使用Child.prototype = new Parent()執(zhí)行了一次Parent()。
改進1:
function Parent(){
this.name = 'parent';
}
function Child(){
Parent.call(this);
this.type = 'child';
}
Child.prototype = Parent.prototype;
缺點:用instanceof和constructor都無法確認實例到底是Child的還是Parent的。
原因: Child.prototype = Parent.prototype直接從Parent.prototype里面拿到constructor,即Parent。
改進2:
function Parent(){
this.name = 'parent';
}
function Child(){
Parent.call(this);
this.type = 'child';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
畫圖說明吧:
var a = new Child();

所以這樣寫我們就構造出了原型鏈。
更多關于JavaScript相關內容還可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
Bootstrap select實現(xiàn)下拉框多選效果
這篇文章主要為大家詳細介紹了Bootstrap select實現(xiàn)下拉框多選效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12

