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 パスワードに特殊文字が含まれている場合とコマンドラインからログインする場合

サーバーでは、データベースにすばやくログインするために、通常は mysql -hhost -uuse...

MySQL のインデックス有効条件とインデックス無効条件の結合

目次1. ジョイントインデックスの故障の条件2. インデックス失敗の条件1. ジョイントインデックス...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

JavaScriptの強力な演算子をいくつか見てみましょう

目次序文1. ヌル合体演算子2. ??= 空代入演算子3. ?. オプション連鎖演算子4. ?: 三...

Vue 構成リクエストの複数サーバーソリューションの詳細な説明

1. 解決策1.1 インターフェースコンテキストパスの説明2 つのバックエンド インターフェイス サ...

Dockerカスタムネットワークの詳細な紹介

目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...

情報製品の読書リストのインタラクティブなデザインに関する考えと経験の共有

リストは、テーブルをコンテナーとして使用するテキストまたはグラフの形式として定義されます。商品の種類...

JS WebSocketを使用して簡単なチャットを実装する方法

目次ショートポーリングロングポーリングウェブソケットコミュニケーションの原則シンプルな1対1チャット...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

MySQLの整数データ型tinyintの詳細な説明

目次1.1Tinyint型の説明1.2 練習環境の説明1.3 未署名属性の追加1.3.1 SQLモー...

Linux の総合システム監視ツール dstat の詳細な例

オールラウンドなシステム監視ツール dstat dstat は、vmstat、iostat、nets...

CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題...

MySQL では UTF-8 が推奨されないのはなぜですか?

最近、Rails 経由で「utf8」でエンコードされた UTF-8 文字列を MariaDB に保存...

Vue はフォームデータ検証のサンプルコードを実装します

el-form フォームにルールを追加します。データにルールを定義する定義されたルールをel-for...