首頁 > web前端 > js教程 > js寄生組合式繼承使用詳解

js寄生組合式繼承使用詳解

php中世界最好的语言
發布: 2018-04-18 16:41:39
原創
2193 人瀏覽過

這次帶給大家js寄生組合式繼承使用詳解,js寄生組合式繼承使用的注意事項有哪些,下面就是實戰案例,一起來看一下。

組合繼承:

function Person( uName ){
      this.skills = [ 'php', 'javascript' ];
      this.userName = uName;
    }
    Person.prototype.showUserName = function(){
      return this.userName;
    }
    function Teacher ( uName ){
      Person.call( this, uName );
    }
    Teacher.prototype = new Person();
    var oT1 = new Teacher( 'ghostwu' );
    oT1.skills.push( 'linux' );
    var oT2 = new Teacher( 'ghostwu' );
    console.log( oT2.skills ); //php,javascript
    console.log( oT2.showUserName() ); //ghostwu
登入後複製

組合繼承有個缺點,父類別的建構子會被呼叫兩次.

第11行,設定子類別原型物件(prototype),呼叫了第一次

# 第9行,實例化物件的時候,又呼叫一次

建構函數的目的是為了複製屬性,第9行肯定是不能少的,第11行的目的是為了取得到父類原型物件(prototype)上的方法,基於這個目的,有沒有別的方法

可以做到 在不需要實例化父類別建構子的情況下,也能得到父類別原型物件上的方法呢?當然可以,我們可以採用寄生式繼承來得到父類別原型物件上的方法

function Person( uName ){
      this.skills = [ 'php', 'javascript' ];
      this.userName = uName;
    }
    Person.prototype.showUserName = function(){
      return this.userName;
    }
    function Teacher ( uName ){
      Person.call( this, uName );
    }
    function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    function inheritPrototype( subObj, superObj ){
      var proObj = object( superObj.prototype ); //复制父类superObj的原型对象
      proObj.constructor = subObj; //constructor指向子类构造函数
      subObj.prototype = proObj; //再把这个对象给子类的原型对象
    }
    inheritPrototype( Teacher, Person );
    var oT1 = new Teacher( 'ghostwu' );
    oT1.skills.push( 'linux' );
    var oT2 = new Teacher( 'ghostwu' );
    console.log( oT2.skills ); //php,javascript
    console.log( oT2.showUserName() ); //ghostwu
登入後複製

其實,說白了寄生組合式繼承就是一個借用構造函數相當於淺拷貝父類的原型對象

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:



#

以上是js寄生組合式繼承使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板