JavaScript プロトタイプ チェーンの詳細な図による説明

関連する推奨事項: JavaScript チュートリアル

1. プロトタイプ チェーン

1.1 プロトタイプ チェーンの説明:

1. (概念)プロトタイプ チェーンは、__proto__ ポインターを介していくつかのプロトタイプで構成されるリンクされたリストを指し、プロトタイプ チェーン内のデータを共有する必要があるオブジェクトにサービスを提供でき、使用されます。 JavaScript 継承メカニズムを実装します。

2. (プロトタイプ チェーン ポインター)プロトタイプ チェーンに含まれるポインター:

   • 各オブジェクトには、オブジェクトのプロトタイプにアクセスするための __proto__ ポインターがあり
   • 、継承を実装するために使用されるオブジェクトです。また、指すコンストラクター ポインターもあります。
   各関数は __proto__ ポインター
   • に
   • 加えて、それに関連付けられたプロトタイプ オブジェクトを指すプロトタイプ ポインターも存在します。プロトタイプ ポインターと __proto__ ポインターは必ずしも同じではありません。

1.2 継承を含まないプロトタイプ チェーンの図:

1. コンストラクター タイプのプロトタイプ チェーン: プロトタイプ チェーンによって提供されるオブジェクトはコンストラクターによって生成されます(この図は基礎となるチェーンに関係する非常に重要であり、インターネット上に同様の図があります)。

関数 A() {

}
a1 = 新しい A() とします
a2 = 新しい A() とします
a3 = 新しい A() とします
// これらのコード行は、以下に示すプロトタイプ チェーンを生成します。

2. 非コンストラクター型のプロトタイプ チェーン: プロトタイプ チェーンによって提供されるオブジェクトは、ファクトリ関数、オブジェクト リテラル、Object.create などによって生成されます。

let A = {
    テスト： ""
}
a1 = Object.create(A) とします。
a2 = Object.create(A) とします。
a3 = Object.create(A) とします。
// これらのコード行は、以下に示すプロトタイプ チェーンに対応します。

3. 簡略化されたプロトタイプ チェーン: 実際にプロトタイプ チェーンを検討する場合、「コンストラクター Function のインスタンスに対応するプロトタイプ チェーン」、さらには「プロトタイプ チェーンのエンド ポイント」や「Object.prototype」さえ考慮する必要がないことがよくあります。これらの低レベルの内容を考慮することは、複雑な継承関係に関しては分析に役立たないからです。一般的な分析には、次の 2 つの簡略化された図を使用できます。

関数 A() {

}
a1 = 新しい A() とします
a2 = 新しい A() とします
a3 = 新しい A() とします
// これらのコード行は、以下に示すプロトタイプ チェーンを生成します。

1.3 継承を伴うプロトタイプ チェーンの図解 継承を

伴うプロトタイプ チェーンは、簡略化された図を使用して解析できます。

// 寄生結合モードを使用して、継承された関数 C() {}
関数 B() {}
B.プロトタイプ = 新しい C()
関数 A() {}
A.プロトタイプ = 新しい B()

a1 = 新しい A() とします
a2 = 新しい A() とします
a3 = 新しい A() とします

1.4 プロトタイプチェーンのエンドポイント

プロトタイプチェーンのエンドポイントは null であり、プロトタイプオブジェクトを参照しません

1.5 プロトタイプのダイナミクス プロトタイプ

のダイナミクスについては、「オブジェクト指向プログラミング」で詳しく説明されています。主にプロトタイプの書き直しと修正が含まれます。以下にいくつかの例を示します。
例 1 - プロトタイプのダイナミクス

var A = function() {};
Aプロトタイプn = 1;
var b = 新しい A();
A.プロトタイプ = {
    n：2、
    メートル：3
}
var c = 新しい A();

コンソール.log(bn); // 1
console.log(bm); // 未定義

コンソール.log(cn); // 2
console.log(cm); // 3

例 2 - プロトタイプとプロトタイプ チェーンのボトム チェーンのダイナミクス

var F = function() {};

Object.prototype.a = function() {
    console.log('a');
};

Function.prototype.b = function() {
    console.log('b');
}

var f = 新しい F();

fa(); //
fb(); // b 属性は存在しません Fa();
Fb(); // b

上記の「継承を伴わないプロトタイプチェーン図」の最初の図を参照すると、次の簡略化された参照図解析問題を描くことができます。

例 3 - プロトタイプのダイナミクスとプロトタイプ チェーンのボトム チェーン

関数 person(name) {
    this.name = 名前
}
p = 新しい人('トム'); とします。
console.log(p.__proto__) // person.prototype
console.log(Person.__proto__) // Function.prototype

例 4 — プロトタイプのダイナミクスとプロトタイプ チェーンのボトム チェーン

var foo = {}, F = function(){};
Object.prototype.a = '値 a';
Function.prototype.b = '値 b';
オブジェクト.プロトタイプ = {
    a: 「値a」
}
関数.プロトタイプ = {
    b：「値b」
}

console.log(foo.a); // 値
console.log(foo.b); // 未定義

console.log(Fa); // 値
console.log(Fb); // 値 b は、

上記の「継承を含まないプロトタイプ チェーン図」の最初の図を参照して、次の簡略化された参照図の解析問題を描画します。 foo と F は宣言時にプロトタイプをバインドするため、スタック メモリに格納されているポインタを介してヒープ メモリに格納されているプロトタイプのアドレスを取得します。まず、プロトタイプが変更されます。変更操作では foo 上のプロトタイプが変更され、F はスタック メモリのポインタを介して変更された結果にアクセスできます。 2 番目のステップは、プロトタイプを書き換えることです。JS はすべて「値の転送操作」です。プロトタイプを書き換えた後、まず新しいプロトタイプを格納するためにヒープ メモリに新しい領域を開き、次にスタック メモリに新しい領域を開きます。ポインタをヒープメモリに保存します。このとき、foo と F が保持するスタック メモリ ポインタが新しいスタック メモリ ポインタと異なるため、foo と F は書き換えられたプロトタイプにアクセスできません。

関連する推奨事項: JavaScript 学習チュートリアル。

上記は JavaScript プロトタイプ チェーンを画像とテキストで詳しく説明しています。詳細については、PHP 中国語 Web サイトの他の関連記事に注目してください。