ホームページ  >  記事  >  ウェブフロントエンド  >  JS の結合継承とは何ですか? JS 組み合わせ継承の概要

JS の結合継承とは何ですか? JS 組み合わせ継承の概要

不言
不言転載
2018-10-23 15:46:212927ブラウズ

この記事では、JS の結合継承とは何なのかについて説明します。 js の組み合わせ継承の紹介は、参考になると思います。

組み合わせ継承

組み合わせ継承は、疑似古典的継承とも呼ばれ、プロトタイプ チェーンとコンストラクターの技術を借用した継承パターンを組み合わせることを指します。それらを組み合わせて、両方の長所を活用します。

実装アイデア: プロトタイプ チェーンを使用してプロトタイプのメソッドとメソッドの継承を実現し、コンストラクターを借用してインスタンス属性の継承を実現します。

このように、関数の再利用はプロトタイプでメソッドを定義することによって実現され、各インスタンス オブジェクトが独自の属性を持つことも保証されます。

function SuperType(name){
    this.name = name;
    this.colors = ["red","green","blue"];
}

SuperType.prototype.sayName = function(){
    console.log(this.name);
}

function SubType(name, age) {
    
    //继承属性
    SuperType.call(this, name);

    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType();
SubType.prototype.sayAge = function(){
    console.log(this.age);
}

var instance1 = new SubType("Shaw", 18);
instance1.colors.push("black");
console.log(instance1.colors); //["red","green","blue","black"]
instance1.sayName(); // "Shaw"
instance1.sayAge(); // 18

var instance2 = new SubType("Roc", 19);
console.log(instance2.colors); // ["red", "green", "blue"]
instance2.sayName(); // "Roc"
instance2.sayAge(); // 19

上記のコードでは、SuperType コンストラクターは、名前と色という 2 つの属性を定義します。

sayName() メソッドは SuperType のプロトタイプで定義されています。

SubType コンストラクターは、SuperType コンストラクターを呼び出すときに name パラメーターを渡し、独自の属性 age を定義します。

次に、SuperType インスタンス オブジェクトを SubType プロトタイプに割り当て、新しいプロトタイプに SayAge() メソッドを定義します。

このようにして、2 つの異なる SubType インスタンス オブジェクトは、それぞれのオブジェクトを持つだけでなく、独自のプロパティ - Colors プロパティを含みますが、同じメソッドを使用することもできます。

Composition は、プロトタイプ チェーンと借用したコンストラクターの欠点を回避し、それらの利点を組み合わせます。 JavaScript で最も一般的に使用される継承パターンになります。さらに、演算子のinstanceofメソッドとisPrototypeOf()メソッドを使用して、構成継承に基づいて作成されたオブジェクトを識別することもできます。

以上がJS の結合継承とは何ですか? JS 組み合わせ継承の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。