JavaScriptプロトタイプチェーンの詳細な説明

JavaScriptプロトタイプチェーンの詳細な説明

1. コンストラクタとインスタンス

Foo()というメソッドを宣言すると、 new Foo()を通じてインスタンスを宣言できます。

    関数Foo() {
      console.log("私はコンストラクターです");
    }
    Foo を定数 f1 で置き換えます。

これで、 Foo()がコンストラクターであり、 f1そのインスタンスであることがはっきりとわかります。

2. プロパティプロトタイプ

Foo()コンストラクターはメソッドです。

メソッドもオブジェクト データ型なので、メソッドはオブジェクトであると言えます。

オブジェクトにはプロパティがありますが、メソッドにはprototypeと呼ばれる他のオブジェクトにはない特別なプロパティがあります。

このプロパティはプロトタイプ オブジェクト ( Foo.prototype ) を指します。プロトタイプ オブジェクトには、元のコンストラクターへのポインターを含む、 constructorと呼ばれる独自のプロパティが含まれます。

   関数Foo() {
      console.log("私はコンストラクターです");
    }
    Foo を定数 f1 で置き換えます。

    console.log(Foo.prototype); //Foo のプロトタイプ オブジェクト console.log(f1.prototype); //f1 はアンダーフィデーションされていない


3. プロパティ __proto__

上記のprototypeは、コンストラクターのすべてのインスタンスに共有メソッドとプロパティを提供します。

インスタンスは共有メソッドとプロパティにどのようにアクセスしますか?

f1 インスタンスにはprototypeはありませんが、すべてのオブジェクトのプロパティである属性__proto__,があります。これは、独自のコンストラクターを構築する prototype オブジェクトを指します。次に、js 言語はこの属性を使用して、インスタンスが共有プロパティとメソッドにアクセスできるようにします。

Foo は f1 のコンストラクタであり、 Foo.prototypeFooのプロトタイプオブジェクトなので、 f1.__proto__ Foo.prototypeを指します。

    関数Foo() {
      console.log("私はコンストラクターです");
    }

    Foo を定数 f1 で置き換えます。

    console.log(Foo.プロトタイプ);
    コンソールにログ出力します。


4. プロトタイプのメソッドへのアクセス

Foo コンストラクターは、インスタンスにnameなどの同じプロパティを持たせたい場合、それをプロトタイプ オブジェクトに追加します。

   関数Foo() {
      console.log("私はメソッドです");
    }

    Foo.prototype.name = "私は Foo によって作成されたインスタンスによって共有されるプロパティです";

    Foo を定数 f1 で置き換えます。
    Foo を定数 f2 で置き換えます。

    console.log(f1.name);//私はFooによって作成されたインスタンスの共有プロパティです console.log(f2.name);//私はFooによって作成されたインスタンスの共有プロパティです

5. コンストラクタにも__proto__がある

上記では、すべてのオブジェクトに__proto__があると書かれています。Foo は関数とオブジェクトの両方なので、 Foo.__proto__とは何でしょうか?

次に、Foo のコンストラクターが誰であるかを調べましょう。Foo は、関数固有のメソッドとプロパティを持つ関数です。そのコンストラクターは、js の組み込みコンストラクターである Function です。そのFunction.prototype 、js で作成するすべての関数に、関数のいくつかのパブリック メソッドとプロパティを提供します。

つまりFoo.__proto__ Funtion.prototypeを指します

6. コンストラクタのプロトタイプにも__proto__がある

Foo.prototypeもオブジェクトなので、 __proto__。

Foo.prototypeを探すときは常に__proto__,そのコンストラクターを見つける必要があります。Foo.prototype はオブジェクトであり、純粋なオブジェクトなので、そのコンストラクターは Object であり、Object のプロトタイプはObject.prototype。

Foo.prototype.__proto__ Object.prototypeを指します

7. Object.prototypeは非常に特殊なプロトタイプオブジェクトです

ArrayStringFuntionObjectなどのコンストラクターはすべて関数です。
それらはすべて Function コンストラクターのインスタンスです。
Array.__proto__String.__proto__Funtion.__proto__Object.__proto__ Funtion.prototypeプロトタイプを指します。
Funtion.prototypeプロトタイプのいくつかのパブリック メソッドを呼び出すことができます。
たとえば、 nameを呼び出して関数の名前を表示できます。

Array.prototypeString.prototypeFuntion.prototype 、これらのプロトタイプ オブジェクトはすべてオブジェクトです。
これらはすべて Object コンストラクターのインスタンスです。
Array.prototype.__proto__String.prototype.__proto__Funtion.prototype.__proto__ Object.prototypeプロトタイプを指します。
プロトタイプオブジェクトObject.prototypeのパブリックメソッドを呼び出すことができます。

Object.prototypeは少し特殊です。オブジェクトではありますが、Object 自体のインスタンスではありません。
Object.prototype.__proto__プロトタイプチェーンの終点である null を指します。

8. まとめ

メソッド、つまり関数だけが、メソッドのプロトタイプであるprototypeを持ちます。
したがって、インスタンスには通常、対応する構築メソッド、つまりコンストラクターがあり、インスタンスの__proto__は構築メソッドのプロトタイプを指します。
js には、 ArrayStringFuntionObjectなど、js のオブジェクト タイプに応じて割り当てられる多くの組み込み構築メソッドがあり、そのプロトタイプは多くのカプセル化された共通メソッドを提供します。
すべての構築メソッドは関数そのもので、js 組み込みコンストラクターFuntionのインスタンスです。
Object.prototypeを除き、すべての構築メソッドのプロトタイプはオブジェクト自体であり、js に付属する Object コンストラクターのインスタンスです。
Object.prototype.__prototype 、プロトタイプ チェーンの終点である null を指します。

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

以下もご興味があるかもしれません:
  • JavaScriptプロトタイプと例の詳細な説明
  • JavaScript プロトタイプチェーンを理解するための 2 つの図
  • JavaScript プロトタイプの詳細
  • JavaScript プロトタイプとプロトタイプチェーンの詳細
  • Javascript デザインパターン プロトタイプ モードの詳細
  • JavaScript プロトタイプとは何かご存知ですか?

<<:  iframeリフレッシュ方式の方が便利

>>:  MySQL/MariaDB でピボット テーブルを実装する方法のサンプル コード

推薦する

MySQLの共通関数を使用してJSONを処理する方法

公式ドキュメント: JSON 関数名前説明JSON_APPEND() JSONドキュメントにデータを...

ウェブフロントエンドウェブ開発の一般的なプロセスの簡単な紹介

フロントエンド開発を行っている初心者の学生を多く見かけますが、彼らの効率は比較的遅いです。常にコード...

docker ベースの redis-sentinel クラスターの構築例

1. 概要Redis Cluster は、Redis ノードのグループ間での高可用性とシャーディング...

cocoscreatorプレハブの詳しい説明

目次プレハブプレハブの作り方プレハブの役割1. 同じタイプのノードをバッチで作成する2. 特定の時間...

Linux スワップ パーティション (詳細説明)

目次リナックス1. SWAPとは2. swappiness は何を調節しますか? 3. スワップ操作...

NodeJSプロセスがどのように終了するかについて詳しく説明します

目次序文積極的な撤退例外、拒否、および発行されたエラー信号まとめ序文NodeJS プロセスが終了する...

MySQL の冗長インデックスと重複インデックスの詳細な説明

MySQL では、同じ列に複数のインデックスを作成できます。意図的であるかどうかにかかわらず、MyS...

MySQLでSELECT文が実行される仕組み

目次1. マクロの観点からMySQLを分析する2. SQL ステートメントを実行するには、どの程度の...

Webデザインチュートリアル(1):手順と全体レイアウト

<br />注:ウェブサイトの種類を示すものを除くすべてのテキストは、企業サイト用です。...

州と市町村の連携を簡単に実現するJavaScript

この記事では、省と市の簡単な連携を実現するためのJavaScriptの具体的なコードを参考までに紹介...

レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...

process.env.NODE_ENV 本番環境モードを設定する方法

始める前に、process.env.NODE_ENV にはデフォルトで開発と本番の 2 つの状態しか...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

vue N​​progress のプログレスバー機能を実装する際の一般的な問題

NProgress は、ページがジャンプしたときにブラウザの上部に表示される進行状況バーです。公式ウ...