[js高手之路]原型式繼承與寄生式繼承詳解
更新時間：2017年08月28日 08:03:03 投稿：jingxian
下面小編就為大家?guī)硪黄猍js高手之路]原型式繼承與寄生式繼承詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、原型式繼承本質(zhì)其實就是個淺拷貝，以一個對象為模板復制出新的對象
function object( o ){
var G = function(){};
G.prototype = o;
return new G();
}
var obj = {
name : 'ghostwu',
age : 22,
show : function(){
return this.name + ',' + this.age;
}
};
var obj2 = object( obj );
console.log( obj2.name, obj.age, obj.show() );
object函數(shù)中，以對象o為模板，在object函數(shù)體里面，定義一個構造函數(shù)，讓構造函數(shù)的原型對象(prototype)指向o，
返回構造函數(shù)的一個實例，這樣就可以訪問到對象o的所有屬性和方法.
二、因為原型式繼承是個淺拷貝，所以引用類型的數(shù)據(jù)共享在不同的實例之間
function object( o ){
var G = function(){};
G.prototype = o;
return new G();
}
var obj = {
skills : [ 'php', 'javascript' ]
};
var obj2 = object( obj );
obj2.skills.push( 'python' );
var obj3 = object( obj );
console.log( obj3.skills ); //php,javascript,python
obj2改變了skills數(shù)組，obj3的skills結果就是其他實例改變的結果
三、在es5中，新增了一個函數(shù)Object.create()實現(xiàn)了原型式繼承
var obj = {
skills : [ 'php', 'javascript' ]
};
var obj2 = Object.create( obj );
obj2.skills.push( 'python' );
var obj3 = Object.create( obj );
console.log( obj3.skills ); //php,javascript,python
四，寄生式繼承就是把原型式繼承再次封裝，然后在對象上擴展新的方法，再把新對象返回
function object( o ){
var G = function(){};
G.prototype = o;
return new G();
}
function CreateObj( srcObj ){
var dstObj = object( srcObj );
dstObj.sayName = function(){
return this.userName;
}
return dstObj;
}
var obj = {
userName : 'ghostwu',
};
var obj2 = CreateObj( obj );
console.log( obj2.sayName() ); //ghostwu
以上這篇[js高手之路]原型式繼承與寄生式繼承詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
往往我們需要在 JS 中動態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常?；旌鲜褂谩?/div> 2008-11-11
關于JS性能優(yōu)化中的冰山一角：事件代理、警惕閉包。其實本文有一個文章已經(jīng)說到，閉包如何產(chǎn)生，閉包的作用；2011-01-01
這篇文章主要介紹了JS異步宏隊列微隊列原理詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了JavaScript檢測鼠標移動方向的方法,涉及javascript鼠標操作的相關技巧,需要的朋友可以參考下2015-05-05
這篇文章給大家全面總結了JavaScript常用代碼的書寫規(guī)范，分別利用推薦和不推薦的兩種示例代碼讓大家更能直接的了解書寫規(guī)范，其實關于javascript代碼規(guī)范我們應該遵循古老的原則：“能做并不意味著應該做”，好了，下面我們就來一起看看吧。2016-09-09
結合?ES6?類編寫JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結合ES6類編寫JavaScript創(chuàng)建型模式，本文開始系統(tǒng)性的對20多種JavaScript?設計模式進行簡單概述，然后結合ES6類的方式來編寫實例代碼展示其使用方式，需要的朋友可以參考一下2022-07-07
做JavaScript的時候,發(fā)現(xiàn)老是出現(xiàn)錯誤：“未結束的字符串常量”. 自己找了下應該是傳參數(shù)的時候,有特殊字符引起的.網(wǎng)上也找了下,也有好多出現(xiàn)這種情況.做下總結,以方便以后查閱.2010-01-01
這篇文章主要介紹了javascript框架設計模式,結合實例形式分析了javascript模板方法模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2021-09-09
這篇文章主要為大家詳細介紹了小程序獲取周圍IBeacon設備的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
javascript dom追加內(nèi)容實現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的，在本文將為大家介紹下具體的使用方法，感興趣的朋友可以參考下2013-09-09最新評論