JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

プロトタイプチェーン図

ここに画像の説明を挿入

プロトタイピングに必須の知識

プロトタイプを理解するには、 __proto__ 、 prototype 、およびconstructor 3 つのプロパティを理解する必要があります。

1.__proto__ とコンストラクター属性はオブジェクトに固有です。

2. プロトタイププロパティは関数に固有です。

3. js では関数もオブジェクトの一種なので、関数には __proto__ とコンストラクターというプロパティもあります。

プロトタイプの 5 つのルール:

1. すべての参照型（オブジェクト、配列、関数）はオブジェクト特性を持ち、プロパティを自由に拡張できる。

2. すべての参照型（オブジェクト、配列、関数）には、通常のオブジェクトである__proto__（暗黙のプロトタイプ）属性があります。

3. すべての関数にはプロトタイプ（明示的なプロトタイプ）プロパティがあり、これも通常のオブジェクトです。

4. すべての参照型（オブジェクト、配列、関数）の__proto__値は、そのコンストラクタのプロトタイプを指します。

5. オブジェクトのプロパティを取得しようとするとき、変数自体にこのプロパティがない場合は、__proto__でそのプロパティを探します。

プロトタイププロパティ（プロトタイプを表示）

まずコンストラクタを作成する

var 親 = 関数(){
}
// 関数を定義します。これは単なる通常の関数です。var p1 = new Parent();
//キーワードnewにより、Parentはコンストラクタになります //Parentコンストラクタp1のインスタンスを作成します

prototypeは関数の固有のプロパティであり、これを通じてプロトタイプにアクセスできます。

prototypeもともと継承を実現するために設計されたもので、特定の関数によって作成されたすべてのインスタンスがプロパティとメソッドを共有できるようにしたり、特定のコンストラクターによってインスタンス化されたすべてのオブジェクトが共通のメソッドとプロパティを見つけることができるようにしたりします。 prototypeインスタンスごとに重複したプロパティメソッドを作成する必要がありません。代わりに、コンストラクター関数のプロトタイプオブジェクト (プロトタイプ) にプロパティメソッドを作成します。共有する必要のないものはコンストラクターで作成されます。

Parentはコンストラクタ、Parent.prototypeはプロトタイプです

ここに画像の説明を挿入

Parent.prototypeに追加されたプロパティとメソッドはプロトタイププロパティとプロトタイプメソッドと呼ばれ、コンストラクターのインスタンスはそれらにアクセスして呼び出すことができます。

proto プロパティ (暗黙のプロトタイプ)

__proto__ プロパティはオブジェクト (関数を含む) に固有です。

すべてのオブジェクトには、オブジェクトのプロトタイプオブジェクトを指す __proto__ プロパティがあります。

p1.__proto__ === Parent.prototype; // true

__proto__ は通常、暗黙のプロトタイプと呼ばれ、prototype は通常、明示的なプロトタイプと呼ばれます。オブジェクトの暗黙のプロトタイプは、オブジェクトのコンストラクタの明示的なプロトタイプを指していると言えます。次に、明示的なプロトタイプで定義されたプロパティメソッドが、暗黙的なプロトタイプを介してコンストラクターのインスタンスに渡されます。この方法により、インスタンスはコンストラクタープロトタイプのメソッドとプロパティに簡単にアクセスできます。

Parent.prototypeの暗黙のプロトタイプはオブジェクトプロトタイプを指します

Parent.prototype.__proto__ === Object.prototype; //true

ここに画像の説明を挿入

これにより、プロトタイプチェーンの概念が導入されます。p1.toString p1.toString()が呼び出されると、最初に p1 オブジェクト自体が検索されます。見つからない場合は、p1.__proto__ を通じてプロトタイプオブジェクトParent.prototypeが検索されます。見つからない場合は、 Parent.prototype.__proto__を通じて親プロトタイプオブジェクト Object.prototype が検索されます。 toString メソッドはこのレイヤーにあります。 p1 が使用するメソッドを返します。

もちろん、 Object.prototype に見つからない場合はObject.prototype.__proto__で検索しますが、 Object.prototype.__proto__ === nullなので、 undefined が返されます。このため、オブジェクトの存在しないプロパティにアクセスすると、 undefined が返されます。

コンストラクタプロパティ

コンストラクター関数はプロトタイプを通じてプロトタイプにアクセスするため、プロトタイプも何らかの手段、つまりコンストラクターを通じてコンストラクター関数にアクセスできる必要があります。

前の例と同様に、p1 はオブジェクトであり、p1 のコンストラクターは Parent() です。親のコンストラクタは Function() です

p1.コンストラクタ => f 親{}
Parent.constructor => f Function() { [ネイティブコード] }
Function.constructor => ƒ Function() { [ネイティブコード] }

関数はすべての関数のルートコンストラクターです。

この例から、p1 のconstructorプロパティが Parent を指していることがわかります。つまり、Parent は p1 のコンストラクターです。同様に、Parent のコンストラクタープロパティは Function を指しているため、Function は Parent のコンストラクターであり、Function がルートコンストラクターであることが検証されます。

ここに画像の説明を挿入