ホームページ >ウェブフロントエンド >jsチュートリアル >js での寄生結合継承の使用方法の詳細な説明

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

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-18 16:41:392179ブラウズ

今回は、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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。