JS プロトタイプチェーンについて詳しく説明します。-jsチュートリアル-php.cn

JS プロトタイプチェーンについて詳しく説明します。

不言

リリース： 2018-10-19 14:53:55

転載

3136 人が閲覧しました

この記事の内容は、JS プロトタイプチェーンについて詳しく説明しています。必要な方は参考にしていただければ幸いです。

JS プロトタイプとプロトタイプチェーンについての私の理解はいつも混乱していましたが、「JavaScript 高度なプログラミング」やさまざまな記事を読んだ後、ようやくプロトタイプとプロトタイプチェーンについて予備的な理解ができました。深く理解するために、少し前に遭遇した質問を分析し、自分のアイデアを使用してそれを解釈し、プロトタイプとプロトタイプチェーンについての理解を深めます。

1. 質問

次のプログラムを実行すると結果はどうなりますか?

function Animal() {
    this.name = 'Animal';
}

Animal.prototype.changeName = function (name) {
    this.name = name;
}

function Cat() {
    this.name = 'Cat';
}

var animal = new Animal();

Cat.prototype = animal;
Cat.prototype.constructor = Cat;

var cat = new Cat();

animal.changeName('Tiger');

console.log(cat.name)

ログイン後にコピー

A. 猫
C. トラ
D. 答えは
B 猫

2. 解釈

1. プロトタイプオブジェクト新しい関数が作成されるたびに、このプロパティポイントに従ってその関数のプロトタイプ属性が作成されます。関数のプロトタイプオブジェクトに。デフォルトでは、すべてのプロトタイプオブジェクトは、プロトタイプ属性が配置されている関数へのポインターであるコンストラクター属性を自動的に取得します。

次の図は、

function Animal() {
    this.name = 'Animal';
}
Animal.prototype.changeName = function (name) {
    this.name = name;
}

ログイン後にコピー

を説明するために使用されます

JS プロトタイプチェーンについて詳しく説明します。最初に、Animal 関数が作成され、Animal Prototype と Animal を指すプロトタイプ属性が含まれます。 .prototype コンストラクターは Animal を指します。このとき、name 属性は関数内で定義されているため、Animal Prototype にはなく、changeName 関数は Animal.prototype.changeName を通じて定義されているため、複数のオブジェクトをインスタンス化するときにこのメソッドを使用してプロトタイプを共有できます。保存方法。同様に、Cat 関数を作成する場合も同様です。

function Cat() {
    this.name = 'Cat';
}

ログイン後にコピー

JS プロトタイプチェーンについて詳しく説明します。 2. インスタンスの作成

コンストラクターを呼び出して新しいインスタンスを作成すると、インスタンスにはポインターが含まれます。内部 (内部プロパティ)、コンストラクターのプロトタイプオブジェクトを指します。このポインタは、ECMA-262 第 5 版では [[プロトタイプ]] と呼ばれています。スクリプトで [[Prototype]] にアクセスする標準的な方法はありませんが、Firefox、Safari、および Chrome はすべてのオブジェクトの属性 __proto__ をサポートしています。この接続は、インスタンスとコンストラクターの間ではなく、インスタンスとコンストラクターのプロトタイプオブジェクトの間に存在することに注意することが重要です。

// 将Cat的原型对象指向animal实例，获得animal中的属性，原有的属性丢失
Cat.prototype = animal;

ログイン後にコピー

JS プロトタイプチェーンについて詳しく説明します。この部分は、Cat のプロトタイプオブジェクトのポインタを次のように指すのと同じです。そのため、Cat プロトタイプオブジェクトの元のコンストラクター属性は失われ、name 属性と __proto__ 内部属性を含む、animal インスタンスの属性に置き換えられます。同時に、__proto__ 属性も Animal.prototype を指します。そのため、Cat は、Animal に呼び出されるプロパティとメソッドを検索するプロトタイプの Chain を渡すこともできます。

// 相当于重新创建了constructor，指向Cat构造函数
Cat.prototype.constructor = Cat;

ログイン後にコピー

JS プロトタイプチェーンについて詳しく説明します。この部分は、プロトタイプオブジェクトでコンストラクター属性を再作成し、Cat コンストラクターを指すことと同じです。

var cat = new Cat();   // 实例化一个Cat对象，跟实例化Animal相似

ログイン後にコピー

JS プロトタイプチェーンについて詳しく説明します。 3. メソッド

animal.changeName('Tiger');

ログイン後にコピー

を呼び出します。 var Animal = new Animal() が Animal オブジェクトをインスタンス化するとき、Animal には以下が含まれます。 Animal.prototype を指す内部プロパティ。つまり、animal はコンストラクター Animal と直接の関係がありません。ただし、changeName はインスタンスに含まれていませんが、animal.changeName(name) を呼び出すことができることがわかります。これは、オブジェクト属性を見つけるプロセス、つまり、

最初にインスタンスを見つけます。インスタンス内で、animalにchangeNameメソッドがあるかどうか、ない場合は検索を続け、Animal.prototypeに移動してchangeNameメソッドがあるかどうかを確認し、ある場合はそれを呼び出し、ない場合は検索を続け、Object内を検索します。プロトタイプの場合、最終的に見つからなかった場合は null が返されます。

明らかに、ここのインスタンスanimalにはchangeNameメソッドがないため、Animal.prototypeに移動してchangeNameメソッドを見つけ、それを呼び出してインスタンスanimalのname属性をTigerに正常に変更する必要があります。

このとき、Cat.prototype はインスタンスの Animal を指しているため、Cat.prototype の name 属性も Tiger に変更されます。

JS プロトタイプチェーンについて詳しく説明します。