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

この記事では、javascript に関する関連知識を提供します。主にプロトタイプ チェーンに関する関連問題を紹介します。プロトタイプ チェーンとは、__proto__ ポインターを介していくつかのプロトタイプで構成されるリンク リストを指します。プロトタイプ チェーンは機能します。プロトタイプ チェーンでデータを共有したいオブジェクト。皆様のお役に立てば幸いです。

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

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

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

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

2. (プロトタイプ チェーン ポインター) プロトタイプ チェーンに関与するポインター:

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

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

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

function A() {

}
let a1 = new A()
let a2 = new A()
let a3 = new A()
// 这几行代码会产生下面图示的原型链

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

let A = {
    test: ""
}
let a1 = Object.create(A)
let a2 = Object.create(A)
let a3 = Object.create(A)
// 这几行代码对应下面图示的原型链

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

function A() {

}
let a1 = new A()
let a2 = new A()
let a3 = new A()
// 这几行代码会产生下面图示的原型链

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

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

// 使用寄生组合模式实现继承
function C() {}
function B() {}
B.prototype = new C()
function A() {}
A.prototype = new B()

let a1 = new A()
let a2 = new A()
let a3 = new A()

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

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

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

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

例 1 - プロトタイプのダイナミクス

var A = function() {};
A.prototype.n = 1;
var b = new A();
A.prototype = {
    n: 2,
    m: 3
}
var c = new A();

console.log(b.n); // 1
console.log(b.m); // undefined

console.log(c.n); // 2
console.log(c.m); // 3

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

var F = function() {};

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

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

var f = new F();

f.a(); // a
f.b(); // 并不存在b属性

F.a(); // a
F.b(); // b

上記を参照 前述の「継承のないプロトタイプ チェーンの図」の最初の図は、参照図の分析問題を単純化するために次のように描くことができます。

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

function Person(name) {
    this.name = name
}
let p = new Person('Tom');
console.log(p.__proto__) //  Person.prototype
console.log(Person.__proto__) // Function.prototype

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

var foo = {}, F = function(){};
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';
Object.prototype = {
    a: "value a"
}
Function.prototype = {
    b: "value b"
}

console.log(foo.a); // value a
console.log(foo.b); // undefined

console.log(F.a); // value a
console.log(F.b); // value b

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

foo と F は、宣言時にプロトタイプをバインドするため、スタック メモリに格納されているポインタを介して、ヒープ メモリに格納されているプロトタイプのアドレスを取得します。まず、プロトタイプが変更されます。変更操作により、ヒープ メモリ上のプロトタイプが変更されます。Foo と F は、スタック メモリのポインタを介して、変更された結果に引き続きアクセスできます。 2 番目のステップはプロトタイプを書き換えることです。JS はすべて「値の転送操作」です。プロトタイプを書き換えた後、まず新しいプロトタイプを格納するためにヒープ メモリに新しい領域を開き、次にスタック メモリに新しい領域を開きますヒープメモリへのポインタを格納します。このとき、foo と F が保持するスタック メモリ ポインタが新しいスタック メモリ ポインタと異なるため、foo と F は書き換えられたプロトタイプにアクセスできません。

関連する推奨事項:

JavaScript 学習チュートリアル

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