JavaScript プロトタイプとプロトタイプチェーンの詳細

JavaScript プロトタイプとプロトタイプチェーンの詳細

序文:

JavaScript 、多くの場合「プロトタイプベースの言語」として説明されます。各オブジェクトには「プロトタイプ オブジェクト」があり、オブジェクトはプロトタイプをテンプレートとして使用し、プロトタイプからプロパティとメソッドを継承します。プロトタイプ オブジェクトにもプロトタイプがあり、そこからプロパティやメソッドなどが継承されます。この関係は「プロトタイプ チェーン」と呼ばれることが多く、1 つのオブジェクトに他のオブジェクトで定義されたプロパティとメソッドがある理由を説明します。

正確に言うと、これらのプロパティとメソッドは、オブジェクト インスタンス自体ではなく、 Objectコンストラクターのprototypeプロパティで定義されます。

プロトタイプとプロトタイプ チェーンは、次の 4 つの文で明らかになります。

  • 各関数(クラス)はプロパティprototypeを持って生まれ、プロパティ値はインスタンス使用のために現在のクラスのプロパティとメソッドを格納するオブジェクトです(プロトタイプを表示)
  • ブラウザがプロトタイプ用にデフォルトで開くヒープ メモリには、 constructorプロパティがあります。これは、現在のクラス自体を格納します (⚠️注: 自分で開くヒープ メモリには、デフォルトではconstructorプロパティがないため、手動で追加する必要があります) "(コンストラクター)"
  • すべてのオブジェクトには__proto__プロパティがあり、これは現在のインスタンスが属するクラスのプロトタイプを指します (クラスが決定されていない場合はObject.prototypeを指します) (暗黙のプロトタイプ)
  • オブジェクトのプロパティを取得しようとすると、オブジェクト自体にこのプロパティがない場合、暗黙のプロトタイプ __proto__ (つまり、コンストラクターの表示プロトタイプprototype ) でそのプロパティが検索されます。 「(プロトタイプチェーン)」

コンストラクター、プロトタイプ、インスタンスの関係:

constructorにはprototypeオブジェクトがあり、このオブジェクトにはprototype constructorへのポインターが含まれています。また、各instanceはプロトタイプ オブジェクトへの内部ポインター(__proto__)

1. プロトタイプ(明示的なプロトタイプ)

すべての関数にはprototypeプロパティがあります

// コンストラクタ(クラス)
関数 Person(名前){
    this.name = 名前
}
// 新しいインスタンス(オブジェクト)
var person = new Person('南玖')
console.log(person) //Person { name: '南玖' }
console.log(Person.prototype) //コンストラクタ関数のプロトタイプ(クラス)----->object Person.prototype.age = 18 //コンストラクタ関数のプロトタイプ console.log(person.age) // 18


上記では、オブジェクトを指すこの関数Personのプロトタイプを出力しました。このオブジェクトは、コンストラクタを呼び出すことによって作成されたインスタンスのプロトタイプです。

上の図はコンストラクターとインスタンス プロトタイプの関係を示しており、コンストラクターのプロトタイプ プロパティがオブジェクトを指していることがわかります。

インスタンスとそのプロトタイプの関係は何ですか?ここで__proto__属性について言及する必要がある

2. __proto__ (暗黙のプロトタイプ)

上記の4つの文から、これはすべてのJavascriptオブジェクト(nullを除く)が持つプロパティであることがわかります。このプロパティは、オブジェクトのプロトタイプ(つまり、インスタンスプロトタイプ)を指します。

JavaScriptにはクラスの概念がないため、継承に似た方法を実装するために、オブジェクトとプロトタイプは__proto__を介してリンクされ、プロトタイプ チェーンが形成され、オブジェクトはそれに属さないプロパティにアクセスできるようになります。

次に、インスタンスとインスタンスプロトタイプの関係を証明します。

console.log(person.__proto__) //インスタンス (オブジェクト) プロトタイプ ---> オブジェクト console.log(person.__proto__ === Person.prototype) //インスタンスのプロトタイプはコンストラクター関数のプロトタイプと同じです

上の図から、インスタンス オブジェクトとコンストラクターの両方がプロトタイプを指すことができることがわかりますが、プロトタイプはコンストラクターまたはインスタンスを指すことができるのでしょうか?

3. コンストラクター

コンストラクターは複数のインスタンス オブジェクトを作成できるため、プロトタイプにはインスタンスを指す属性はありません。

前の4つの文から、「ブラウザによってプロトタイプ用にデフォルトで割り当てられたヒープメモリにはconstructorプロパティがある」ことがわかっているので、プロトタイプはコンストラクタ関数を指すこともできます。このプロパティは「 constructor 」です。

したがって、次の点を証明できます。

console.log(Person.prototype.constructor) // インスタンスの明示的なプロトタイプのコンストラクタ ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor) //インスタンスの暗黙的なプロトタイプコンストラクター ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor === Person.prototype.constructor) //true インスタンスプロトタイプのコンストラクタは、クラスのコンストラクタと同じです。console.log(Person === Person.prototype.constructor) //true


インスタンス オブジェクトの__proto__どのように生成されますか?
new演算子を使用すると、生成されたインスタンスオブジェクトには__proto__属性があることが分かっています。

関数 Foo() {}
// この関数は Function のインスタンス オブジェクトです // 関数はシンタックス シュガーです // 実際には内部で new Function() を呼び出します


したがって、 newプロセスでは、新しいオブジェクトが__proto__属性とともに追加され、コンストラクターのプロトタイプにリンクされていると言えます。

4. 新しい原則

簡単に言えば、次の 4 つのステップに分けられます。

  • 新しい空のオブジェクトを作成する
  • リンクプロトタイプ
  • これをバインドしてコンストラクタを実行します
  • 新しいオブジェクトを返します
関数myNew() {
// 1. 新しい空のオブジェクトを作成する let obj = {}
// 2. コンストラクタを取得する let con = arguments.__proto__.constructor
// 3. リンクプロトタイプ obj.__proto__ = con.prototype
// 4. これをバインドしてコンストラクタを実行します。let res = con.apply(obj, arguments)
// 5. 新しいオブジェクトを返す return typeof res === 'object' ? res : obj
}

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

プロトタイプについて話した後、プロトタイプ チェーンとは何かを見てみましょう。まずは写真を見てみましょう:

この図では、 __proto__で接続されたチェーン関係をプロトタイプチェーンと呼びます。

5.1 プロトタイプチェーンの役割

プロトタイプ チェーンは、 JavaScriptで継承がどのように実装されるかを決定します。プロパティにアクセスする場合、その検索メカニズムは次のようになります。

  • オブジェクトのインスタンス属性にアクセスします。存在する場合は直接返します。存在しない場合は、 __proto__を通じてプロトタイプ オブジェクトで検索します。
  • プロトタイプオブジェクト上で見つかった場合は、それが返されます。見つからない場合は、プロトタイプオブジェクトの__proto__を検索し続けます。
  • Object.prototype が見つかるまで検索を続けます。見つかった場合はそれを返します。見つからない場合はundefined返しますObject.prototype.__proto__は null であるため、これ以上検索しないでください。つまり、Object はすべてのオブジェクトのプロトタイプ チェーンの最上位です。

図から、すべてのオブジェクトは最終的にプロトタイプ チェーンを通じて Object.prototype を見つけることができることがわかります。Object.prototype もオブジェクトですが、このオブジェクトは Object によって作成されるのではなく、エンジン自体が Object.prototype を作成します。したがって、すべてのインスタンスはオブジェクトであると言えますが、すべてのオブジェクトがインスタンスであるとは限りません。

5.2 コンストラクタの __proto__ とは何ですか?

上記のプロトタイプチェーンの説明から、コンストラクター関数の__proto__理解できるはずです。 JavaScriptではすべてがオブジェクトであるため、コンストラクター関数もオブジェクトである必要があり、オブジェクトには__proto__があります。

関数 Person(){}
コンソールログ(Person.__proto__)
console.log(関数プロトタイプ)
console.log(Person.__proto__===Function.prototype) // true


「これは、すべての関数が Function のインスタンスであることも示しています」

このように理解すると、 Function.__proto__ Function.prototype。。。。印刷して見てみましょう

Function.__proto__ === Function.prototype // true


まさにこれが印刷される内容です。 Function.prototypenew Function()によって生成されますか?

答えは「いいえ」です。この機能もエンジン自体によって作成されます。まずエンジンは Object.prototype を作成し、次に Function.prototype を作成し、__proto__ を介してこの 2 つを接続します。これは、let fun = Function.prototype.bind() に prototype プロパティがないのはなぜか、という上記の質問も非常によく説明しています。 Function.prototype はエンジンによって作成されたオブジェクトであるため、エンジンはこのオブジェクトにプロトタイプ プロパティを追加する必要はないと判断します。

6. まとめ

  • Objectはすべてのオブジェクトの親です。すべてのオブジェクトは__proto__を通じてそれを見つけることができます。
  • Functionすべての関数の父です。すべての関数は__proto__を通じてそれを見つけることができます。
  • Function.prototypeObject.prototypeは、エンジンによって作成される 2 つの特殊なオブジェクトです。
  • 上記の 2 つの特殊なオブジェクトを除き、他のオブジェクトはコンストラクターを通じて作成されます。
  • 関数のprototypeはオブジェクト、つまりプロトタイプである。
  • オブジェクトの__proto__はプロトタイプを指します。__ __proto__はオブジェクトとプロトタイプを接続してプロトタイプ チェーンを形成します。

JavaScriptプロトタイプとプロトタイプチェーンの詳細に関するこの記事はこれで終わりです。JavaScript JavaScriptとプロトタイプチェーンの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScriptプロトタイプチェーンを理解する
  • JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明
  • JavaScript プロトタイプとプロトタイプチェーンの深い理解
  • Javascript プロトタイプとプロトタイプチェーンをご存知ですか?
  • JavaScriptプロトタイプとプロトタイプチェーンの詳細な説明
  • JavaScript のプロトタイプとプロトタイプ チェーンを理解する

<<:  CSS でレスポンシブ レイアウトを実装する方法

>>:  クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析

推薦する

Docker で MySQL を起動したときに SQL 文を自動的に実行する方法

Docker で MySQL コンテナを作成する場合、コンテナの起動後にデータベースとテーブルが自動...

innerHTML アプリケーション

ブランクのブログ: http://www.planabc.net/ innerHTML プロパティは...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

Vueはメニューナビゲーションを実装するためにelement-uiを使用します

この記事では、Element-uiを使用してメニューナビゲーションを実装するVueの具体的なコードを...

ボリュームを使用してホストと Docker コンテナ間でファイルを転送する方法

以前、Docker コンテナとローカル マシン間のファイル転送に関する記事を書きました。しかし、この...

TypeScriptジェネリックの使用

目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...

MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明

目次導入効果原理形状練習するこの記事では、例を使用して、MySQL マスター/スレーブ レプリケーシ...

React NativeのScrollViewプルダウンリフレッシュ効果

この記事では、React Native ScrollViewのプルダウンリフレッシュ効果の具体的なコ...

Vue 監視プロパティと計算プロパティ

目次1. 監視プロパティを監視する1. ショッピングカート2. すべて選択し、すべて選択解除する2....

Nginx 最適化サービスで Web ページ圧縮を実装する方法

リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...

MySQLで最新のトランザクションIDを照会する方法

前に書いた内容: ビジネス ロジックの判断を行うために、最新のトランザクション ID を表示する必要...

キャンバスをベースにした超クールな水光効果を実現

この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

Windows 10 に MySQL 8.0.19 を zip 形式でインストールする詳細なチュートリアル

目次1.ダウンロード後、インストールしたいディレクトリに解凍します。 2. インストールディレクトリ...

CSS を使用して固定左列と適応右列の 2 列レイアウトを実現する 4 つの方法

1. フロート+オーバーフロー:非表示このメソッドは主にオーバーフローを通じて BFC をトリガーし...