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 でピボット テーブルを実装する方法のサンプル コード

推薦する

Docker に Kong ゲートウェイをインストールする方法の例

1. Dockerネットワークを作成する docker ネットワーク作成 kong-net 2. デ...

MySQL ビュー管理ビューの例の詳細説明 [追加、削除、変更、クエリ操作]

この記事では、例を使用して MySQL ビューの管理ビュー操作について説明します。ご参考までに、詳細...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...

Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)

サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...

clearfixとclearの例

この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と c...

HTML+CSS3+JSで実装されたドロップダウンメニュー

成果を達成する html <div class="コンテナ"> &l...

VMware ESXi サーバー仮想化クラスター

目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...

CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果(加速、減速など)の速度曲線を制御します。速度制御機...

MySQL マルチテーブル結合クエリ例の説明

実際のプロジェクトでは、複数のテーブル間に関係が存在します。 1 つのテーブル内のすべてのデータを取...

Vueカスタムv-has命令、ボタン権限判定の手順

目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...

nginxのデフォルトポートを変更する方法の詳細な説明

まず設定ファイルがどこにあるか調べる nginx.confはどこにありますかこれらのディレクトリを調...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

Vueスロットの使用の詳細

目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...

CSSブレンドモードとSVGを使用して、製品画像の色を動的に変更します。

数日前、Codepen で @Kyle Wetton が書いた、CSS ブレンディング モードと S...

MySQLデータのバックアップとリカバリの実装方法の分析

この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...