JSプロトタイプとプロトタイプチェーンを分かりやすく分析

今回は、JS プロトタイプとプロトタイプ チェーンのわかりやすい分析をお届けします。JS プロトタイプとプロトタイプ チェーンを分析する際の 注意事項とは何ですか? 実践的なケースを見てみましょう。

ブラウザ内のオブジェクト

ブラウザにはどのようなオブジェクトがありますか? ES ではグローバル オブジェクトは global ですが、ブラウザではグローバル オブジェクトは window です。

Chrome コンソールにウィンドウを入力すると、ウィンドウ内にあるものが表示されます。

ウィンドウには次のオブジェクトが表示されます。

Object、String、Numbr、Boolean、Array、Date、Math、parseInt、parseFloat などの属性は、すべて ES で指定されている必須オブジェクトです。
ドキュメント、アラート、プロンプト、atob など。これらはブラウザーに組み込まれている属性です。

これらのオブジェクトはすべてハッシュ構造を持っています。たとえば、Object の下に String には独自の

属性とメソッド があり、対応する API 呼び出しがあります。

単純型とオブジェクト

例は次のとおりです: n1 は単純型、n2 はオブジェクトです。

var n1 = 'a'var n2 = new String('a')
n1.length
n1.hasOwnProperty('0')
n2.length
n2.hasOwnProperty('0')
n1.xxx = 2n1.xxx // undefined

差分

n1の値がスタックに格納されます。 n2 が割り当てられると、スタック内にヒープを指すアドレスが作成され、ヒープ メモリ内に新しい String 型オブジェクトが作成されます。オブジェクト n2 には、prototype 属性に加えていくつかの属性があることがわかります。

Attribute

n2はlength属性を持つオブジェクトなので呼び出されます。 n1 は単なる

string ですが、なぜ length 属性も持つのでしょうか? n1.length の場合、js は次の操作を実行します: var temp = new String(n1);n1.length;実行時に、新しいオブジェクトがヒープ メモリに一時的に作成されます。このオブジェクトは、実行後に、対応する String 型になります。したがって、n1.xxx = 2 の操作ではエラーは報告されませんが、この時点でヒープ メモリ内の n1 のデータが破壊されているため、n1.xxx では再び unknown が表示されます。

そのため、jsでは新しいオブジェクトのnewメソッドが使われることはほとんどなく、変数が直接代入されます。

n2のhasOwnProperty()

hasOwnProperty()は

Objectクラス

型のメソッドですが、どこで見つけられますか？

ここでは hasOwnProperty() が n2.proto.proto にあります。 n2.proto は String.prototype を指し、最後に String.prototype.proto は Object.prototype を指します。 String はプロトタイプであり、Object もプロトタイプです。 Object.prototype には、オブジェクト型のすべてのパブリック プロパティが格納されます。

このようにして、スペースを効果的に節約し、オブジェクト内で見つからない属性については、proto が指すオブジェクト内で検索します。指す点は通常、あるプロトタイプのプロトタイプです。

protoとprototypeの場所

var n = new Number(1)var s= new String('1')var o= new Object()

上記のメソッドは、var object = function ()とみなすことができます。

要約すると、object.proto = function.prototype。

proto にアクセス

proto はオブジェクトに関連しており、誰がオブジェクトを生成したかを確認します。 n の父親は Number なので、Number.prototype に移動して見つけます。 Number にも proto があります。アクセスするときは、その親オブジェクト内で探します。

Function
String.proto === Function.prototype //true

関数は、String、Object、Number もすべてオブジェクトおよび関数とみなすことができます。 new String() は以前に使用されたため、これは関数であり、関数の戻り結果の

データ型

はオブジェクトです。 String の父親は Function です。

Function.proto === Function.prototype //trueFunction.prototype.proto === Object.prototype //trueFunction.proto.proto === Object.prototype //true

Function

をFunctionメソッド

、つまりvar Function = new Function()によって生成されたオブジェクトとみなすと、Function.proto === Function.prototype

Fuctionの型はfunction 、 Function から構築されます。その関係は上の写真からも分かります。 new String() の場合、String の型も function になり、String.proto は Function.prototype を指します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS で機能とブラウザーの推論を回避する方法

JS ファサード モードのユースケースの詳細な説明

以上がJSプロトタイプとプロトタイプチェーンを分かりやすく分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。