JavaScriptプロトタイプチェーンを理解する

1. プロトタイプとプロトタイプチェーンの平等関係を理解する

まず、次の 2 つの概念を明確に理解する必要があります。

jsは関数オブジェクトと通常のオブジェクトに分かれています。各オブジェクトには__proto__属性がありますが、関数オブジェクトのみがprototype属性を持ちます。
ObjectとFunction js の組み込み関数です。よく使用される同様の関数には、 Array 、 RegExp 、 Date 、 Boolean 、 Number 、 Stringなどがあります。

これら 2 つの概念を私と一緒に 3 回読んで覚えてください。後で使用します。

では、 __proto__とprototypeとは何でしょうか？2つの概念で理解してみましょう。

属性__proto__は、 constructorと__proto__という 2 つの属性を持つオブジェクトです。
プロトタイプオブジェクトprototypeは、どのコンストラクターがインスタンスを作成したかを記録するために使用されるデフォルトのconstructorプロパティがあります。

これら 2 つの概念を私と一緒に 3 回読んで覚えてください。後で使用します。

次のコンストラクタPersonがあり、そのプロトタイプには国属性motherland='China'があります。

 関数 Person(名前, 年齢){ 
    this.name = 名前;
    this.age = 年齢;
 }
 
 Person.prototype.motherland = '中国'

person01インスタンスはnew Person()によって作成されました

 person01 = new Person('Xiaoming', 18); とします。

js の父は、js プロトタイプとプロトタイプチェーンを設計する際に、次の 2 つの原則に従いました。

 Person.prototype.constructor == Person // **ガイドライン 1: プロトタイプ オブジェクトのコンストラクター (つまり、Person.prototype) は、コンストラクター自体を指します**
 person01.__proto__ == Person.prototype // **ガイドライン 2: インスタンス (つまり person01) の __proto__ とプロトタイプ オブジェクトは同じ場所を指します**

これら 2 つのルールを私と一緒に 3 回読んで覚えておいてください。これらは後で使用されます。

上記の4 つの概念と 2 つの基準を覚えておけば、どのプロトタイプチェーンの等価性判断も正しいものになります。

概念と基準を理解したかどうかは、上の図で確認できます。必ず上の図を確認してください。

// この古典的なグラフを上から分析し始めます function Foo() function Foo()
f1 = new Foo() とします。
f2 = new Foo() とします。

f1.__proto__ = Foo.prototype; // ルール2
f2.__proto__ = Foo.prototype; // ルール2
Foo.prototype.__proto__ = Object.prototype; // ルール 2 (Foo.prototype も共通オブジェクトなので、ルール 2 が適用されます)
Object.prototype.__proto__ = null; // プロトタイプチェーンはここで停止します Foo.prototype.constructor = Foo; // ルール 1
Foo.__proto__ = Function.prototype; // ルール 2
Function.prototype.__proto__ = Object.prototype; // 原則 2 (Function.prototype は基本的に共通オブジェクトなので、原則 2 が適用されます)
Object.prototype.__proto__ = null; // プロトタイプチェーンはここで停止します // **ここで Foo と Function の違いに注意してください。Foo は Function のインスタンスです**

// この古典的なグラフの分析を真ん中から開始します Function Object() Function Object()
o1 = 新しいオブジェクト();
o2 = 新しいオブジェクト();

o1.__proto__ = Object.prototype; // ルール 2
o2.__proto__ = Object.prototype; // ルール 2
Object.prototype.__proto__ = null; // プロトタイプチェーンはここで停止します Object.prototype.constructor = Object; // ルール 1
Object.__proto__ = Function.prototype // 原則 2 (オブジェクトは本質的に関数です);
// これは少し混乱します。Object は本質的に関数であり、Function は本質的にオブジェクトです。Function.prototype.__proto__ = Object.prototype; // ルール 2 (Function.prototype も通常のオブジェクトなので、ルール 2 が適用されます)
Object.prototype.__proto__ = null; // プロトタイプチェーンはここで停止します // 以下の Function Function() からこの古典的な図の分析を開始します Function Function()
Function.__proto__ = Function.prototype // ルール 2
Function.prototype.constructor = Function; // ルール 1

このことから、 __proto__がnullを指しているObjectのプロトタイプオブジェクト ( Object.prototype ) を除いて、他の組み込み関数オブジェクトのプロトタイプオブジェクト (例: Array.prototype) とカスタムコンストラクターの__proto__すべてObject.prototypeを指していることがわかります。これは、プロトタイプオブジェクト自体が通常のオブジェクトであるためです。今すぐ：

Object.prototype.__proto__ = null;
Array.prototype.__proto__ = Object.prototype;
Foo.prototype.__proto__ = Object.prototype;

2: プロトタイプとプロトタイプチェーンとは何を意味しますか?

これらの対等な関係を理解した上で、プロトタイプとプロトタイプチェーンが何を意味するのか考えてみましょう。プロトタイプオブジェクトの機能は、すべてのインスタンスに共通するプロパティとメソッドを格納することであり、これによりメモリ消費を大幅に削減できます。

記事の冒頭にあるPersonコンストラクターと person01 インスタンスを例に挙げます。

コンソールログ(person01)

person01を印刷すると、彼は自身の属性 name = 'Xiaoming'、age = 18 を持ちます。同時に、プロトタイプチェーン関係を通じて、彼は属性 motherland = 'China' を持ちます。

person2インスタンスを作成しましょう

person02 = new Person('Xiaohua', 20); とします。
コンソールログ(person02)

person02を印刷すると、独自の属性 name = 'Xiaohua'、age = 20 があります。同時に、プロトタイプチェーン関係を通じて、属性motherland = 'China'があります。プロトタイプオブジェクトには、 person01とperson02で共有される属性motherland = 'China'格納されていることがわかります。各インスタンスに motherland 属性を追加する必要はありませんが、この属性を、人間の Person のコンストラクターのコンストラクタープロトタイプオブジェクトに格納します。同じ特性やメソッドはたくさんあります。たとえば、私たちは皆、黒い髪をしていますし、食べることや寝ることなどのメソッドも持っています。同じ特性やメソッドが多ければ多いほど、プロトタイプとプロトタイプチェーンの重要性は高まります。 こうすればいい

Person.prototype.hairColor = 'black';
Person.prototype.eat = 関数(){
    console.log('私たちは通常、1日に3食食べます。')
}
コンソールログ(person01)
コンソールログ(person02)

このとき、 person01とperson02再度印刷すると、これらにhairColor属性とeatメソッドがあることに驚きます。インスタンスは、 Personコンストラクターの後に追加された属性とメソッドを動的に取得します。これがプロトタイプとプロトタイプチェーンの意味です。動的に取得できるため、メモリを節約できます。

もう一つ注目すべき点は、 person01 が髪を黄色に染めた場合、 hairColorどうなるかということです。

person01、髪の色 = '黄色';
コンソールログ(person01)
コンソールログ(person02)

person01のhairColor = 'yellow' 、 person02のhairColor = 'black'であることがわかります。インスタンスオブジェクトはプロトタイプから継承された属性とメソッドをオーバーライドします。これは、「プロパティの上書きとプロパティのシールド」に相当します。この操作では、プロトタイプのプロパティとメソッドは変更されず、当然、統合コンストラクターによって作成された他のインスタンスも変更されません。プロトタイプオブジェクトのプロパティとメソッドを変更することによってのみ、プロトタイプチェーンを通じて他のインスタンスによって取得されたプロパティとメソッドを変更できます。

JS プロトタイププロトタイプチェーンの理解に関するこの記事はこれで終わりです。より関連性の高い JS プロトタイププロトタイプチェーンのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: