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

推薦する

js キャンバスは検証コードを実装し、検証コード機能を取得します

この記事の例では、検証コードを作成して取得するためのjsキャンバスの具体的なコードを共有しています。...

Vue でフルスクリーンを実装し、フルスクリーン終了を監視する

目次序文:実装手順:完全なソースコード:詳細情報:序文: vueでは、デフォルトページを実装し、di...

nginx+lua を使用した単一マシンでの何万もの同時接続の実装

nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...

Vue3はCSSの無限シームレススクロール効果を実装します

この記事では、CSS無限シームレススクロール効果を実現するためのvue3の具体的なコードを参考までに...

MySQL 5.7 JSON 型の使用の詳細

JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ていますが、...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

CentOS 7 での Docker プロキシの設定 (Linux での Systemd サービスの環境変数設定)

Docker デーモンは、 HTTP_PROXY 、 HTTPS_PROXY 、およびNO_PRO...

mysql-connector-java.jar パッケージのダウンロード プロセスの詳細な説明

mysql-connector-java.jar パッケージのチュートリアルをダウンロードします: ...

Linux で履歴コマンドを表示および実行する方法

履歴コマンドを表示し、指定されたコマンドを実行します owen@owen:~/owen/softwa...

bash スクリプトで ssh/scp コマンドにパスワードを渡す方法の詳細な説明

SSHPASSをインストールする最新のオペレーティング システムでは、sshpass パッケージはデ...

CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)

この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...

HTML タイトル属性をラップする方法

数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...

Vueベースのビデオプレーヤーの実装例

既存のビデオ プレーヤーがニーズを満たせない場合は、ビデオを自分でカプセル化する必要があります。ビデ...

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

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