JavaScriptプロトタイプと例の詳細な説明

コンストラクタインスタンスとプロトタイプの関係

1. あらゆる関数にはプロトタイププロパティがあり、これはオブジェクトである

関数F(){}
console.log(F.prototype) // => オブジェクト
//プロトタイプオブジェクト F.prototype.sayHi = function () {
  console.log('こんにちは!')
}

2. コンストラクターのプロトタイプ オブジェクトには、デフォルトでコンストラクター プロパティがあり、これはプロトタイプ オブジェクトが配置されている関数を指します。

console.log(F.constructor === F) // => true
//これを示します

3. コンストラクタを通じて取得されたインスタンスオブジェクトには、コンストラクタのプロトタイプオブジェクトへのポインタ_proto_が含まれます。

var インスタンス = 新しい F()
console.log(instance.__proto__ === F.prototype) // => true

これは、現在のコンストラクタによって作成されたインスタンスオブジェクトには、 _proto_というポインタが含まれており、このポインタはコンストラクタのプロトタイプオブジェクトを指していることを意味します。

したがって、インスタンスを使用してプロトタイプオブジェクトのメンバーに直接アクセスできます。

例：

instance.sayHi() // => hi! と印刷します。

知らせ

_proto_は非標準属性です

プロトタイププロパティ

Javascript では、すべてのコンストラクターに別のオブジェクトを指すプロトタイプ プロパティがあることが規定されています。
このオブジェクトのすべてのプロパティとメソッドは、コンストラクターのインスタンスによって継承されます。

つまり、すべてのオブジェクト インスタンスが共有する必要があるプロパティとメソッドをプロトタイプ オブジェクト上で直接定義できるということです。

例：

関数 Person (名前, 年齢) {
  this.name = 名前
  this.age = 年齢
}
console.log(Person.prototype) //プロトタイプを印刷します Person.prototype.type = 'human' //プロトタイプオブジェクトのプロパティにhumanをマウントします Person.prototype.sayName = function () { //関数を定義することもできます console.log(this.name)
}
p1 = new Person(...) とします。
p2 = new Person(...) とします。
console.log(p1.sayName === p2.sayName) // => true

console.log(p1.sayName === p2.sayName)で出力された結果が true であることがわかります。

これは、すべてのインスタンスのtype属性とsayName()メソッドが同じメモリ アドレスにあり、 prototypeオブジェクトを指しているため、実行効率が向上するためです。

属性またはメンバーの検索原則

複数のインスタンス オブジェクトがプロトタイプ オブジェクト内のプロパティまたはメンバーを共有できることはわかっていますが、この共有メカニズムは JS ではどのように実装されるのでしょうか。

これは属性の検索原理について言及する必要がある

コードがインスタンス オブジェクトのプロパティを読み取るたびに、指定された名前のプロパティまたはメンバーの検索が実行されます。

検索プロセスは次のとおりです。

1. オブジェクトインスタンス自体から検索を開始する

2. 指定された名前の属性がインスタンスオブジェクト内に見つかった場合、その属性の値が返されます。

3. 見つからない場合は、インスタンスオブジェクトに含まれるポインターが指すプロトタイプオブジェクトの検索を続行し（上記参照）、プロトタイプオブジェクト内で指定された名前の属性を探します。

4. このプロパティがプロトタイプオブジェクト内に見つかった場合、プロパティの値が返されます。

instance.sayName()を実行すると、インスタンス オブジェクトの最初の検索とプロトタイプ オブジェクトの検索の 2 つの検索が実行されます。

要約する

以上が、プロトタイプによってマウントされたプロパティとメソッドを複数のインスタンス オブジェクトが共有する基本原理です。

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。