JavaScriptによる継承機構のコンストラクタとプロトタイプチェーンのハイブリッドメソッドの使い方を詳しく解説_javascriptスキル

コンストラクターとプロトタイプ実装の継承の欠陥

まず、コンストラクターとプロトタイプ チェーンの継承メソッドの欠点を分析しましょう。

コンストラクター (オブジェクトの偽装) の主な問題は、コンストラクター メソッドを使用する必要があり、プロトタイプを通じて定義されたメソッドを継承できないことです。これは最良の選択ではありません。ただし、プロトタイプ チェーンを使用する場合は、パラメーター化されたコンストラクターを使用できません。開発者はどのように選択するのでしょうか?答えは簡単です。両方を使用してください。

コンストラクタープロトタイプの混合方法

この継承メソッドは、プロトタイプを使用する代わりに、コンストラクターを使用してクラスを定義します。クラスを作成する最良の方法は、コンストラクターを使用してプロパティを定義し、プロトタイプを使用してメソッドを定義することです。このメソッドは継承メカニズムにも適用され、オブジェクトを使用してコンストラクターのプロパティを継承するふりをし、プロトタイプ チェーンを使用してプロトタイプ オブジェクトのメソッドを継承します。これら 2 つのメソッドを使用して前の例を書き直します。コードは次のとおりです。

コードをコピーします コードは次のとおりです。

関数 ClassA(sColor) {
this.color = sColor;
}

ClassA.prototype.sayColor = function () {
alert(this.color);
};

関数 ClassB(sColor, sName) {
ClassA.call(this, sColor);
this.name = sName;
}

ClassB.prototype = new ClassA();

ClassB.prototype.sayName = function () {
alert(this.name);
};

この例では、継承メカニズムが 2 行で強調表示されています。青色の実装。最初の強調表示されたコード行の ClassB コンストラクターでは、オブジェクトが ClassA クラスの sColor プロパティを継承するふりをするために使用されています。 2 番目の強調表示されたコード行では、ClassA クラスのメソッドがプロトタイプ チェーンを使用して継承されます。このハイブリッド アプローチではプロトタイプ チェーンが使用されるため、instanceof 演算子は引き続き正しく動作します。

次の例では、このコードをテストします。

コードをコピーします コードは次のとおりです。

var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.sayColor(); //「青」を出力
objB.sayColor(); //「赤」を出力
objB.sayName(); //「ジョン」を出力