JavaScript プロトタイプチェーンを理解するための 2 つの図

前回の記事では、JavaScript プロトタイプを紹介しました。プロトタイプチェーンも一緒に紹介してみませんか? JavaScript におけるプロトタイプチェーンは難しいポイントであり、面接でも必ず聞かれる質問なので、今のうちに学んでおきましょう。

1. プロトタイプの関係

JavaScriptのすべての関数にはプロトタイプを返す prototype プロパティがあり、プロトタイプにはそれに関連付けられたコンストラクター関数を指すconstructorプロパティがあります。コンストラクターによってインスタンス化されたオブジェクトには、コンストラクターのプロトタイプと同じメモリを__proto__ __proto__属性があります。

標準では__proto__属性が削除されており、代わりにObject.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)使用されていることに注意してください。

次に、Object コンストラクターとプロトタイプの関係をテストします。サンプルコードは次のとおりです。

// まず、Object はコンストラクタ関数なので、プロトタイププロパティを持ちます var result = Object.prototype
console.log(result) // プロトタイプオブジェクトを取得する/*
 * プロトタイプオブジェクトのコンストラクタプロパティ -> それに関連付けられたコンストラクタを返します * Object.getPrototypeOf(result) はコンストラクタを指すプロトタイプを返します
 */
var result2 = 結果.コンストラクタ
console.log(result2) // [関数: オブジェクト]
var result3 = Object.getPrototypeOf(結果)
console.log(結果3) // null

図を以下に示します。

Object.getPrototypeOf(Object.prototype)を通じてObject.prototypeのプロトタイプを取得すると、返される値は null になります。これは、 Object.prototypeが見つかったら検索を停止できることを意味します。

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

プロトタイプチェーンが何であるかを理解しやすくなるように、まず次のコードを見てみましょう。

関数 Person(名前) {
  this.name = 名前
}

var PP = Person.プロトタイプ
var PPC = PP.コンストラクタ
// コンストラクタと同じであることを確認する console.log(PPC === Person) // true

// Person をインスタンス化する
var person = new Person('Yiwan Zhou')
// インスタンス化された Person オブジェクトのプロトタイプを取得します var pP = Object.getPrototypeOf(person)
// インスタンス化されたPersonオブジェクトのプロトタイプがコンストラクタのプロトタイプを指していることを確認します
console.log(pP === PP) // 真

実際、次のコードでテストされているように、すべてのコンストラクターはデフォルトで Object から継承されます。

// Person.prototype のプロトタイプを取得します。var PPP = Object.getPrototypeOf(PP)
var OP = オブジェクト.プロトタイプ
// 2つが等しいかどうかを確認します console.log(PPP === OP) // true

上記のコードはあまり明確ではないので、理解を助けるために図を描きました。

上の図の赤い線はプロトタイプチェーンです。プロトタイプチェーンは、最終結果が null (つまりObject.prototypeになるまで、プロトタイプ内の関係を指します。プロトタイプチェーンは終了し、 **Object.prototype**プロトタイプチェーンの終点であることを意味します。

Object.setPrototypeOf(obj, prototype)メソッドを使用して特定のコンテンツのプロトタイプチェーンを設定できますが、パフォーマンスに大きな負荷がかかるため、必要がない場合は実行しないことをお勧めします。

3. 結論

2 つの図を使用して、JavaScript におけるプロトタイプの関係とプロトタイプチェーンについて説明します。最後に、プロトタイプチェーンの終点を紹介します。

これで、2 枚の画像で JavaScript のプロトタイプチェーンを理解する方法についての記事は終了です。JavaScript プロトタイプチェーンの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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