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

推薦する

VMware Workstation での VMware vSphere のセットアップ (グラフィック チュートリアル)

VMware vSphere は、業界をリードする最も信頼性の高い仮想化プラットフォームです。 v...

JavaがMySQL 8.0に接続できない問題の解決策

この記事では、参考までにMySQL 8.0に接続できないJavaの問題をまとめて紹介します。具体的な...

MySQL の垂直テーブルを水平テーブルに変換する方法と最適化のチュートリアル

1. 縦型テーブルと横型テーブル垂直テーブル: テーブル内のフィールドとフィールド値はキーと値の形式...

Web スライスとは何ですか?

IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...

JavaScript 状態コンテナ Redux の詳細な説明

目次1. Reduxを選ぶ理由2. Reduxデータフロー3つの原則4. Reduxソースコード分析...

Vue.js の計算プロパティ、監視プロパティ、ライフサイクルの詳細な説明

目次序文計算されたプロパティ計算プロパティの紹介入門ケース統計価格事例ゲッターメソッドとセッターメソ...

Vueはログインタイプの切り替えを実装します

この記事では、ログインタイプの切り替えを実装するためのVueの具体的なコードを例として紹介します。具...

CSS でデジタル ページング効果のコードと手順を実装する方法

かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...

ナビゲーションバーコンポーネントをVueでカプセル化する

はじめに:ナビゲーション バーなどのコンポーネント ベースのアイデアを使用して機能モジュールを完全に...

HTML テーブル マークアップ チュートリアル (6): 暗い境界線の色属性 BORDERCOLORDARK

表では、右下の境界線の色を個別に定義したり、セルの左上の境界線の色を定義したりできます。これら 2 ...

Linux bash: ./xxx: バイナリ ファイルを実行できません エラー

今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...

crontab スケジュールされたタスクが実行されない理由の分析と解決

序文Linux のスケジュールされたタスクを実装する方法としては、cron、anacron、at な...

Vue ElementUI は非同期読み込みツリーを実装します

この記事の例では、vue ElementUI の非同期読み込みツリーを実装するための具体的なコードを...

Gobangゲームを実現するためのjsキャンバス

この記事では、Gobangゲームを実装するためのキャンバスの具体的なコードを参考までに共有します。具...

モバイルレイアウトにvw+remを使用する方法

まだ rem フレキシブルレイアウトを使用していますか?圧縮された js コードの大きなセクションを...