js での寄生結合継承の使用方法の詳細な説明-jsチュートリアル-php.cn

js での寄生結合継承の使用方法の詳細な説明

php中世界最好的语言

リリース： 2018-04-18 16:41:39

オリジナル

2174 人が閲覧しました

今回は、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

ログイン後にコピー

結合継承には、親クラスの

コンストラクターが2回呼び出されるという欠点があります。 11行目、サブクラスのプロトタイプオブジェクト

(プロトタイプ)を設定し、最初の

を呼び出します。 9行目、オブジェクトをインスタンス化するときに、再度呼び出します

コンストラクターの目的は

属性

をコピーすることです。11行目の目的は、親クラスのプロトタイプオブジェクト(プロトタイプ)のメソッドを取得することです。この目的に基づいて、他のメソッドはありますか?

親クラスのコンストラクターをインスタンス化せずに、親クラスのプロトタイプオブジェクトのメソッドを取得することはできますか? もちろん、寄生継承を使用して、親クラスのプロトタイプオブジェクトのメソッドを取得することもできます

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 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

以上がjs での寄生結合継承の使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。