JavaScript プロトタイプ チェーンのプロトタイプ プロパティとメソッド インスタンスの詳細な説明

プロトタイプ オブジェクトのプロパティとメソッドはすべて、そのクラスのすべてのインスタンスに渡されます。プロトタイプ チェーンは、この機能を使用して継承メカニズムを実装します。 前の例のクラスがプロトタイプ メソッドを使用して再定義されると、次の形式になります:

function ClassA() {
}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
    alert(this.color);
};
function ClassB() {
}
ClassB.prototype = new ClassA();

プロトタイプ メソッドの魔法はコードの最後の行です。 。ここでは、ClassB のプロトタイプ プロパティを ClassA のインスタンスに設定します。 ClassA のすべてのプロパティとメソッドが必要だが、それらを ClassB のプロトタイプ プロパティに個別に追加したくないため、これは興味深いものです。 ClassA のインスタンスをプロトタイプ プロパティに割り当てるより良い方法はありますか?

注: パラメータを渡さずに ClassA のコンストラクターを呼び出します。これはプロトタイプチェーンにおける標準的な慣行です。コンストラクターにパラメーターがないことを確認してください。

オブジェクトの偽装と同様に、サブクラスのすべてのプロパティとメソッドは、プロトタイプ プロパティが割り当てられた後に表示される必要があります。これは、プロトタイプ プロパティが割り当てられる前に割り当てられたすべてのメソッドが削除されるためです。なぜ？プロトタイプのプロパティが新しいオブジェクトに置き換えられるため、新しいメソッドが追加された元のオブジェクトは破棄されます。したがって、name 属性と SayName() メソッドを ClassB クラスに追加するコードは次のとおりです:

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

次の例を実行してこのコードをテストできます:

var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor();
objB.sayColor();
objB.sayName();

さらに、instanceof 演算子は独自の方法で動作します。プロトタイプチェーン内。 instanceof は、ClassB のすべてのインスタンスについて、ClassA と ClassB の両方に対して true を返します。例:

var objB = new ClassB();
alert(objB instanceof ClassA);    //输出 "true"
alert(objB instanceof ClassB);    //输出 "true"

ECMAScript の弱い型指定の世界では、これは非常に便利なツールですが、オブジェクトの偽装を使用する場合には使用できません。ただし、サブクラスのプロトタイプが直接再割り当てされるため、次の状況が発生します:

console.log(objB.__proto__===objB.constructor.prototype)   //false

ClassB のプロトタイプ チェーンのプロトタイプ プロパティが別のクラスのオブジェクトによって上書きされるためです。出力結果は、objB.__proto__ が objB.constructor.prototype ではなく ClassB.prototype を指していることを示しています。これも分かりやすいですが、オブジェクトリテラルの new ClassA() インスタンスに代入されるのは、オブジェクトリテラルのメソッドで定義されたオブジェクトのコンストラクター（constructor）が、ルートコンストラクターの Object.prototype を指します。空のオブジェクト {}、{} は当然ながら ClassB.prototype とは異なります。

以上がJavaScript プロトタイプ チェーンのプロトタイプ プロパティとメソッド インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。