JavaScriptプロトタイプと例の詳細な説明

JavaScriptプロトタイプと例の詳細な説明

コンストラクタインスタンスとプロトタイプの関係

1. あらゆる関数にはプロトタイププロパティがあり、これはオブジェクトである

関数F(){}
console.log(F.prototype) // => オブジェクト
//プロトタイプオブジェクト F.prototype.sayHi = function () {
  console.log('こんにちは!')
}

2. コンストラクターのプロトタイプ オブジェクトには、デフォルトでコンストラクター プロパティがあり、これはプロトタイプ オブジェクトが配置されている関数を指します。

console.log(F.constructor === F) // => true
//これを示します

3. コンストラクタを通じて取得されたインスタンスオブジェクトには、コンストラクタのプロトタイプオブジェクトへのポインタ_proto_が含まれます。

var インスタンス = 新しい F()
console.log(instance.__proto__ === F.prototype) // => true

これは、現在のコンストラクタによって作成されたインスタンスオブジェクトには、 _proto_というポインタが含まれており、このポインタはコンストラクタのプロトタイプオブジェクトを指していることを意味します。

したがって、インスタンスを使用してプロトタイプオブジェクトのメンバーに直接アクセスできます。

例:

instance.sayHi() // => hi! と印刷します。

知らせ

_proto_は非標準属性です

プロトタイププロパティ

Javascript では、すべてのコンストラクターに別のオブジェクトを指すプロトタイプ プロパティがあることが規定されています。
このオブジェクトのすべてのプロパティとメソッドは、コンストラクターのインスタンスによって継承されます。

つまり、すべてのオブジェクト インスタンスが共有する必要があるプロパティとメソッドをプロトタイプ オブジェクト上で直接定義できるということです。

例:

関数 Person (名前, 年齢) {
  this.name = 名前
  this.age = 年齢
}
console.log(Person.prototype) //プロトタイプを印刷します Person.prototype.type = 'human' //プロトタイプオブジェクトのプロパティにhumanをマウントします Person.prototype.sayName = function () { //関数を定義することもできます console.log(this.name)
}
p1 = new Person(...) とします。
p2 = new Person(...) とします。
console.log(p1.sayName === p2.sayName) // => true

console.log(p1.sayName === p2.sayName)で出力された結果が true であることがわかります。

これは、すべてのインスタンスのtype属性とsayName()メソッドが同じメモリ アドレスにあり、 prototypeオブジェクトを指しているため、実行効率が向上するためです。

属性またはメンバーの検索原則

複数のインスタンス オブジェクトがプロトタイプ オブジェクト内のプロパティまたはメンバーを共有できることはわかっていますが、この共有メカニズムは JS ではどのように実装されるのでしょうか。

これは属性の検索原理について言及する必要がある

コードがインスタンス オブジェクトのプロパティを読み取るたびに、指定された名前のプロパティまたはメンバーの検索が実行されます。

検索プロセスは次のとおりです。

1. オブジェクトインスタンス自体から検索を開始する

2. 指定された名前の属性がインスタンスオブジェクト内に見つかった場合、その属性の値が返されます。

3. 見つからない場合は、インスタンスオブジェクトに含まれるポインターが指すプロトタイプオブジェクトの検索を続行し(上記参照)、プロトタイプオブジェクト内で指定された名前の属性を探します。

4. このプロパティがプロトタイプオブジェクト内に見つかった場合、プロパティの値が返されます。

instance.sayName()を実行すると、インスタンス オブジェクトの最初の検索とプロトタイプ オブジェクトの検索の 2 つの検索が実行されます。

要約する

以上が、プロトタイプによってマウントされたプロパティとメソッドを複数のインスタンス オブジェクトが共有する基本原理です。

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript プロトタイプチェーンを理解するための 2 つの図
  • JavaScript プロトタイプの詳細
  • JavaScriptプロトタイプチェーンの詳細な説明
  • JavaScript プロトタイプとプロトタイプチェーンの詳細
  • Javascript デザインパターン プロトタイプ モードの詳細
  • JavaScript プロトタイプとは何かご存知ですか?

<<:  MySQL グラフィカル管理ツール Navicat のインストール手順

>>:  CSS3を使用してボタンホバーフラッシュダイナミック特殊効果コードを実装する

推薦する

優れた Web UI ライブラリ/フレームワーク 10 選

1. ITミルツールキットIT Mill Toolkit は、リッチ Web アプリケーション用のウ...

Ubuntu 18.04.4 に MySQL をインストールするプロセスの詳細な説明

Ubuntu 18.04.4 に MySQL をインストールするプロセスを見てみましょう。内容は次の...

異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法

新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...

SQL インジェクションのある Web サイトを見つける方法 (必読)

方法 1: Google の詳細検索を使用します。たとえば、次に示すように.asp?id=9などの ...

MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策

1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...

CSSフローティングとフローティング解除について

フロートの定義要素を通常のドキュメント フローから外し、要素を左また​​は右に近づけます。親要素の端...

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...

MySQL 8.0.23のルートパスワードをリセットするための最適なソリューション

この方法は2021年2月7日に編集されました。私が使用しているバージョンは8.0.23です。事件の原...

Tomcat のセッションと Cookie の詳細な説明

序文HTTP はステートレスな通信プロトコルです。各リクエストは互いに独立しており、サーバーは以前の...

Nginx try_files ディレクティブの使用例

Nginx の設定構文は柔軟で、高度に制御可能です。バージョン 0.7 以降では、try_files...

Vue は小数点付きの星評価を実装します

この記事では、小数点付きの星評価を実装するためのVueの具体的なコードを参考までに共有します。具体的...

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロ...

VMware に Centos8 をインストールする詳細なチュートリアル

CentOS公式サイトアドレスhttps://www.centos.org/まず必要なファイルをダウ...

Centos7 での Mysql5.7.19 の詳細なインストールチュートリアル

1. ダウンロード公式サイトからmysql-5.7.19-linux-glibc2.12-x86_6...