JavaScript の継承とプロトタイプ チェーンについての深い理解

この記事では、JavaScript の継承とプロトタイプ チェーンについて詳しく説明します。 テキストとコードが包括的に分析されており、必要な方は参考にしていただければ幸いです。あなた。

JavaScript のほとんどすべてはオブジェクトです。各オブジェクトには、他のオブジェクトにリンクされた内部プロパティがあり、これをプロトタイプと呼びます。プロトタイプ オブジェクト自体にも独自のプロトタイプ オブジェクトがあり、この時点でプロトタイプ チェーンが生成されます。プロトタイプ チェーンをたどると、最終的にはプロトタイプが null のカーネル オブジェクト、つまりプロトタイプ チェーンの終わりに到達します。

プロトタイプチェーンの役割は何ですか?オブジェクトが所有していないプロパティにアクセスすると、JavaScript はプロパティまたはプロトタイプ チェーンの終わりが見つかるまでプロトタイプ チェーンを検索します。この動作により、「クラス」を作成し、継承を実装できることが保証されます。

まだ理解できていなくても大丈夫ですので、実際に理解していきましょう。次に、JavaScript の最も単純な例を見てみましょう。メソッド オブジェクト

function Animal() {}
var animal = new Animal();

で作成された「クラス」です。この Animal クラスにプロパティを追加するには、インスタンスのプロパティを設定するか、Animal プロトタイプを追加する 2 つの方法があります。 。

function Animal(name) {
    // Instance properties can be set on each instance of the class
    this.name = name;
}
// Prototype properties are shared across all instances of the class. However, they can still be overwritten on a per-instance basis with the `this` keyword.
Animal.prototype.speak = function() {
    console.log("My name is " + this.name);
};
var animal = new Animal('Monty');
animal.speak(); // My name is Monty

Animal オブジェクトの構造は、コンソールを見ると明らかになります。 name 属性はオブジェクト自体に属し、speak は Animal プロトタイプに属していることがわかります。

ここで、Animal クラスを拡張して Cat クラスを作成する方法を見てください:

function Cat(name) {
    Animal.call(this, name);
}
Cat.prototype = new Animal();
var cat = new Cat('Monty');
cat.speak(); // My name is Monty

私たちが行ったことは、Cat のプロトタイプを Animal インスタンスに設定することです。 Animal のすべてのプロパティを継承します。同様に、Animal.call を使用して Animal のコンストラクターを継承します。 call は、関数を呼び出して関数内で this の値を指定できるようにする特別な関数です。そのため、 this.name が Animal のコンストラクターにある場合、Animal の名前ではなく Cat の名前が設定されます。

Cat オブジェクトを見てみましょう:

予想どおり、Cat オブジェクトには独自の name インスタンス属性があります。オブジェクトのプロトタイプを見ると、speak プロトタイプ プロパティと同様に、Animal の name インスタンス プロパティも継承していることがわかります。これは、プロトタイプ チェーンがどのように見えるかです。cat.name にアクセスすると、JavaScript は name インスタンス プロパティを検索しますが、プロトタイプ チェーンの下位は検索しません。いずれにせよ、cat.speak にアクセスすると、JavaScript は Animal から継承された speech プロパティを見つけるまで、プロトタイプ チェーンをさらに検索する必要があります。

以上がJavaScript の継承とプロトタイプ チェーンについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。