JSプロトタイプとプロトタイプチェーンについての簡単な説明

JSプロトタイプとプロトタイプチェーンについての簡単な説明

1. プロトタイプ

JavaScript のすべての関数にはこのプロパティがあり、プロトタイプ プロパティを持つすべてのオブジェクトは関数です。プロトタイプの目的は、オブジェクトにメソッド/プロパティを追加することです。

関数の永続性(){}
person.prototype.name = "xiaoming"
console.log(person.prototype)//{名前: "xiaoming", コンストラクター: ƒ}

2. プロトタイプポインタ: __proto__

上記の persion 関数がインスタンス オブジェクト Persion1 を生成し、prototype を使用してそれに属性を追加する場合、記述は次のようになります。

関数の永続性(){}
person.prototype.name = "xiaoming"
Persion1 を新しい Persion() にします。
console.log(Person1) //コンソールの結果は次のようになります

インスタンス Persion1 を印刷した結果は次のとおりです。

上記に出力された結果から、Persion1.__proto__.name = persion.prototype.name、つまり、インスタンス オブジェクトの __proto__ 属性はそのコンストラクターのプロトタイプと等しいことがわかります。

上記を理解すると、プロトタイプチェーンは簡単に理解できます。Persion1.__proto__.__proto__ を通じて Object メソッドを直接見つけることができます。あまり直感的ではないかもしれませんが、コードは次のとおりです。

関数の永続性(){}
person.prototype.name = "xiaoming"
Persion1 を新しい Persion() にします。
console.log(Person1.__proto__.__proto__.toString) //プロトタイプチェーンで見つかった Object の toString メソッド console.log(Object.prototype.toString) //Object の toString メソッド

コンソールには次の結果が出力され、プロトタイプ チェーンのレベルごとの検索機能が確認されます。

要約する

あらゆるオブジェクトは、プロトタイプ チェーン、つまり __proto__ 属性を通じてレベルごとに検索できます。最終的な焦点はオブジェクトであり、唯一の方法は関数です。それらの関係はチェーンのようなもので、この関係をプロトタイプ チェーンと呼びます。

上記は、JS プロトタイプとプロトタイプ チェーンの詳細についての簡単な説明です。JS プロトタイプとプロトタイプ チェーンの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScriptプロトタイプチェーンの詳細な説明
  • JavaScript プロトタイプとプロトタイプチェーンの詳細
  • JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する
  • JavaScriptプロトタイプチェーンを理解する
  • JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明
  • js のプロトタイプ、プロトタイプ オブジェクト、プロトタイプ チェーンの包括的な分析
  • JavaScript のプロトタイプとプロトタイプチェーンの詳細な説明

<<:  MySQL実行計画の詳細な分析

>>:  VMware15 の CentOS7 インストールの詳細なプロセスとよくある問題 (画像とテキスト)

推薦する

jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...

MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析

目次1 トランザクションの同時実行で発生する問題1.1 ダーティリード1.2 繰り返し不可能な読み取...

シンプルなメッセージボードケースを実現するJavaScript

参考までに、Javascriptを使用してメッセージボードの例(メッセージ削除あり)を実装します。具...

効率的なMySQLページングの詳細な説明

序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...

Nest.js のハッシュと暗号化の例の詳細な説明

0x0 はじめにまず、ハッシュアルゴリズムとは何でしょうか?メッセージやセッション項目など、一部のデ...

Linux の fsevents モジュールによって発生する npm ls エラーの解決方法の詳細な説明

Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

openlayers6 マップオーバーレイの一般的な 3 つの用途 (ポップアップウィンドウマーカーテキスト)

目次1. 前に書く2. ポップアップウィンドウを実装するためのオーバーレイ2.1 vueページのad...

Docker MySQLコンテナデータベースへの変更が有効にならない問題を解決する

公式の MySQL イメージを使用するには、構成ファイル、DB データ ファイル ディレクトリなどの...

中国語ウェブコンテンツを紹介する10の経験

<br /> テキスト、シンボル、リンクの 3 つの側面に焦点を当て、主に中国語で、私の...

JavaScript での HTML キャンバスとページ ストレージ テクノロジの使用に関する詳細な説明

目次1. JavaScriptはHTMLでキャンバスを使用する2. ページストレージ技術1. Jav...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...

vue-cropperプラグインは、画像キャプチャとアップロードコンポーネントのカプセル化を実現します。

vue-cropperプラグインをベースにした画像キャプチャとアップロードコンポーネントをカプセル...

Linux システムで MySQL データベースにリモート接続する方法のチュートリアル

序文最近、職場でこの要件に遭遇し、リモート接続を確立するのに 1 時間以上かかりました。ローカル コ...

純粋な CSS ドロップダウン メニュー

成果を達成する実装コードhtml <div id="コンテナ"> &...