ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの継承におけるprotoとconstructor.prototypeの違いは何ですか?

JavaScriptの継承におけるprotoとconstructor.prototypeの違いは何ですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-21 14:57:30413ブラウズ

What's the Difference Between proto and constructor.prototype in JavaScript Inheritance?

proto とconstructor.prototype

__proto__ プロパティとconstructor.prototypeの違いを理解することが重要です。 JavaScript オブジェクトを操作する場合は、constructor.prototype。

proto およびプロトタイプ チェーン

すべての JavaScript オブジェクトには、プロトタイプ オブジェクトを参照する内部 __proto__ プロパティがあります。そのコンストラクターの。このプロトタイプ オブジェクトには、その型のオブジェクトの共有プロパティとメソッドが含まれています。

デモ

次のコードを考えてみましょう。

<code class="js">function Gadget(name, color) {
  this.name = name;
  this.color = color;
}

Gadget.prototype.rating = 3;

var newtoy = new Gadget("webcam", "black");</code>

この中でたとえば、newtoy の __proto__ は、値 3 の評価プロパティを持つ Gadget.prototype を指します。したがって、newtoy.__proto__.__proto__.__proto__ にアクセスすると、それ以上のプロトタイプ オブジェクトがないため、null が返されます。

constructor.prototype.constructor.prototype

この複雑な式は、プロトタイプ チェーンに直接アクセスしません。代わりに、ガジェット コンストラクターのconstructor.prototypeのconstructor.prototypeのconstructor.prototypeへのアクセスを試みます。この場合、それはガジェット コンストラクター自体です。したがって、Gadget.prototype を指し続けます。

Internet Explorer での Null のチェック

Internet Explorer は __proto__ プロパティをサポートしていません。この場合に null をチェックするには、hasOwnProperty() メソッドを使用して __proto__ が存在するかどうかを確認します。例:

<code class="js">if (!(newtoy.hasOwnProperty("__proto__"))) {
  // `__proto__` is not supported
}</code>

視覚的表現

理解を助けるために、プロトタイプ チェーンと __proto__ とconstructor.prototype の関係の視覚的なマップを次に示します。

[プロトタイプ チェーンと __proto__/constructor.prototype の関係のイメージ]

この簡略化された図は、JavaScript オブジェクトの内部動作の包括的な概要を示し、これらのプロパティとその役割の区別を明確にするのに役立ちます。プロトタイプチェーン内。

以上がJavaScriptの継承におけるprotoとconstructor.prototypeの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:のJavaScript次の記事:のJavaScript