快捷導(dǎo)航

[js高手之路]原型式繼承與寄生式繼承詳解

更新時間：2017年08月28日 08:03:03 投稿：jingxian

下面小編就為大家?guī)硪黄猍js高手之路]原型式繼承與寄生式繼承詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、原型式繼承本質(zhì)其實就是個淺拷貝，以一個對象為模板復(fù)制出新的對象

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ù)體里面，定義一個構(gòu)造函數(shù)，讓構(gòu)造函數(shù)的原型對象(prototype)指向o，

返回構(gòu)造函數(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結(jié)果就是其他實例改變的結(jié)果

三、在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

四，寄生式繼承就是把原型式繼承再次封裝，然后在對象上擴(kuò)展新的方法，再把新對象返回

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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript 動態(tài)添加事件代碼
往往我們需要在 JS 中動態(tài)添加事件，這就涉及到瀏覽器兼容性問題了，以下談及的幾種方法，我們也常?；旌鲜褂?。
2008-11-11
善用事件代理，警惕閉包的性能陷阱。
關(guān)于JS性能優(yōu)化中的冰山一角：事件代理、警惕閉包。其實本文有一個文章已經(jīng)說到，閉包如何產(chǎn)生，閉包的作用；
2011-01-01
JS異步宏隊列微隊列原理詳解
這篇文章主要介紹了JS異步宏隊列微隊列原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09
JavaScript檢測鼠標(biāo)移動方向的方法
這篇文章主要介紹了JavaScript檢測鼠標(biāo)移動方向的方法,涉及javascript鼠標(biāo)操作的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
JavaScript常用代碼書寫規(guī)范的超全面總結(jié)
這篇文章給大家全面總結(jié)了JavaScript常用代碼的書寫規(guī)范，分別利用推薦和不推薦的兩種示例代碼讓大家更能直接的了解書寫規(guī)范，其實關(guān)于javascript代碼規(guī)范我們應(yīng)該遵循古老的原則：“能做并不意味著應(yīng)該做”，好了，下面我們就來一起看看吧。
2016-09-09
結(jié)合?ES6?類編寫JavaScript?創(chuàng)建型模式
這篇文章主要介紹了結(jié)合ES6類編寫JavaScript創(chuàng)建型模式，本文開始系統(tǒng)性的對20多種JavaScript?設(shè)計模式進(jìn)行簡單概述，然后結(jié)合ES6類的方式來編寫實例代碼展示其使用方式，需要的朋友可以參考一下
2022-07-07
JavaScript 未結(jié)束的字符串常量常見解決方法
做JavaScript的時候,發(fā)現(xiàn)老是出現(xiàn)錯誤：“未結(jié)束的字符串常量”. 自己找了下應(yīng)該是傳參數(shù)的時候,有特殊字符引起的.網(wǎng)上也找了下,也有好多出現(xiàn)這種情況.做下總結(jié),以方便以后查閱.
2010-01-01
JavaScript框架設(shè)計模式詳解
這篇文章主要介紹了javascript框架設(shè)計模式,結(jié)合實例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下
2021-09-09
小程序獲取周圍IBeacon設(shè)備的方法
這篇文章主要為大家詳細(xì)介紹了小程序獲取周圍IBeacon設(shè)備的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
javascript dom追加內(nèi)容實現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的，在本文將為大家介紹下具體的使用方法，感興趣的朋友可以參考下
2013-09-09