JavaScript プロトタイプの詳細

JavaScript プロトタイプの詳細

1. 概要

1.1 プロトタイプとは何ですか?

JavaScriptでは、関数はプロパティとメソッドを含むFunction型のオブジェクトです。プロトタイプは Function 型オブジェクトのプロパティです。

prototype プロパティは関数定義に含まれており、その初期値は空のオブジェクトです。 JavaScript では、関数に対して定義されたプリミティブ型はないため、プロトタイプは任意の型にすることができます。

プロトタイプは、オブジェクトの共有プロパティとメソッドを保存するために使用されます。プロトタイプのプロパティとメソッドは、関数自体のプロパティとメソッドには影響しません。

サンプルコードの検証は次のとおりです。

関数fun() {
  console.log('関数プロトタイプ')
}
console.log(fun.prototype) // {}

fun.prototypeも空のオブジェクトを返しますが、これはObject.prototypeにプロパティやメソッドがないことを意味するものではありません。これらのプロパティとメソッドは列挙可能ではありません。サンプル コードは次のとおりです。

関数fun() {
  console.log('関数プロトタイプ')
}

console.log(fun.prototype) // {}
// Object.getOwnPropertyNames() を介してすべてのプロパティを取得します console.log(Object.getOwnPropertyNames(fun.prototype)) // [ 'constructor' ]

このうち、コンストラクター属性はコンストラクターの参照を指します。コードは次のようになります。

// コンストラクタープロパティ console.log(fun.prototype.constructor) // [関数: fun]

console.log(fun.prototype.constructor === fun) // true

1.2 プロトタイプを入手する

プロトタイプの概念と機能を理解した後、プロトタイプを操作する前に取得する必要があります。 JavaScriptでプロトタイプを取得するには、以下に示すように 2 つの方法があります。

コンストラクターのprototypeプロパティを通じて。

Object.getPrototypeOf(obj)メソッドを通じて。

2 つの違いは、コンストラクターの prototype プロパティは通常コンストラクターと組み合わせてのみ使用されるのに対し、Object.getPrototypeOf(obj) メソッドは通常、コンストラクターによってインスタンス化されたオブジェクトのプロトタイプを取得するためのメソッドである点です。

サンプルコードは次のとおりです。

// コンストラクタ関数 Person(name) {
  this.name = 名前
}

// コンストラクタのプロトタイプを指す var p1 = Person.prototype

var person = new Person('Yiwan Zhou')

// コンストラクタのプロトタイプを指す var p2 = Object.getPrototypeOf(person)

console.log(p1 === p2) // 真

プロトタイプ自体もオブジェクトなので、プロトタイプを入手したら、それをオブジェクトのように操作することができます。

2. プロトタイプのプロパティ

JavaScriptでは、関数自体もメソッドとプロパティを含むオブジェクトです。次に、関数オブジェクトの別のプロパティであるプロトタイプについて学習します。このプロパティの初期値は空のオブジェクトです。

2.1 プロトタイプを使用してプロパティとメソッドを追加します。

オブジェクトにプロパティとメソッドを追加する別の方法は、プロトタイプを通じて追加することです。プロトタイプ プロパティとプロトタイプ メソッドをコンストラクターに追加すると、コンストラクターによって新しく作成されたすべてのオブジェクトがプロパティとメソッドを共有します。

PS:いわゆるプロトタイプ プロパティまたはプロトタイプ メソッドは、プロトタイプを通じて追加されるプロパティまたはメソッドです。

プロパティとメソッドを追加する方法はいくつかあります。

属性やメソッドを直接追加する

Object.defineProperty()メソッドを使用してプロパティまたはメソッドを追加します。この方法は最初の方法よりも安全です。

プロトタイプにオブジェクトを直接追加します。

サンプルコードは次のとおりです。

//コンストラクタ関数 Fun() {}
// コンストラクターにプロパティとメソッドを直接追加します Fun.prototype.str = 'This is a string'
Fun.prototype.fn = 関数（）{
  console.log('これはメソッドです')
}
//defineProperty を通じてプロパティまたはメソッドを追加します Object.defineProperty(Fun.prototype, 'MyFun', {
  値: 関数 () {
    console.log('これはMyFunです')
  },
})
//テスト console.log(Fun.prototype.str)
Fun.prototype.fn()
Fun.prototype.MyFun()
var fun = 新しい Fun()
楽しいMyFun()
// 以前のプロトタイプをカバーするオブジェクトを直接定義する Fun.prototype = {
  名前:「周の一杯」
  楽しい: 関数() {
    console.log('これは関数です')
  },
}
楽しいプロトタイプ()
var fun = 新しい Fun()
楽しい。楽しい()

2.2 プロトタイププロパティとプロトタイプメソッドへのアクセス

プロトタイプの最も重要な点は、そのリアルタイム性です。 JavaScript のほぼすべてのオブジェクトは参照によって渡されるため、作成する新しいオブジェクト エンティティごとにプロトタイプの独自のコピーは保持されません。つまり、 prototypeプロパティはいつでも変更でき、コンストラクターを通じて作成されたプロパティとメソッドを含め、同じコンストラクターによって作成されたすべてのオブジェクトのプロトタイプ プロパティも同時に変更されます。

上記のコードを引き続き使用して、プロトタイプに新しいメソッドを追加して呼び出します。サンプル コードは次のとおりです。

Fun.prototype.fn = 関数（）{
  console.log('これはメソッドです')
}
fun.fn() //これはメソッドです

先ほど作成したオブジェクトは、新しく追加されたプロトタイプ プロパティとプロトタイプ メソッドにアクセスできます。

3. 独自のプロパティとプロトタイプのプロパティ

まずコンストラクターを作成し、それに 2 つのプロトタイプ プロパティを追加しましょう。

//コンストラクタ関数 Fun() {}
//プロトタイプのプロパティとメソッドを追加します Fun.prototype.name = 'a bowl of porridge'
Fun.prototype.print = 関数（）{
  console.log('これは関数です')
}

コンストラクタを介してオブジェクトを作成し、そのプロパティとメソッドを設定する

//コンストラクタを介してオブジェクトを作成する var fun = new Fun()
//オブジェクトにプロパティとメソッドを追加します fun.name = 'Yiwan Zhou'
fun.SayMe = 関数 () {
  console.log('これはSayMeです')
}

これで、 funオブジェクトには 2 つの独自のプロパティ/メソッドと 2 つのプロトタイプ プロパティ/メソッドができました。これらのプロパティとメソッドに順番にアクセスします。

//プロパティとメソッドにアクセスする console.log(fun.name) // Yiwan Zhou fun.SayMe() // これはSayMeです
fun.print() // これは関数です

nameプロパティにアクセスすると、JavaScript エンジンは fun オブジェクトのすべてのプロパティを走査し、name プロパティの値を返します。 SayMe() メソッドについても同様です。ただし、print() メソッドになると、 JavaScriptエンジンはオブジェクトのすべてのプロパティをトラバースします。この時点では、print() メソッドは見つかりません。次に、 JavaScriptエンジンは、現在のオブジェクトを作成したコンストラクター関数のプロトタイプ、つまりFun.prototypeにアクセスします。そのようなプロパティがある場合は、すぐに戻りますが、ない場合はundefinedを返すか、例外をスローします。

結論:独自のプロパティがある場合は、独自のプロパティへのアクセスを優先し、その後にプロトタイプ プロパティにアクセスします。

3.1 独自のプロパティまたはプロトタイププロパティの検出

所有プロパティとプロトタイプ プロパティの概念と使用法はわかりましたが、プロパティがフリー プロパティかオリジナル プロパティかはどのようにしてわかるのでしょうか。JavaScript では、プロパティの状態を検出する次の 2 つの方法が用意されています。

Object.prototype.hasOwnProperty(prop)メソッドを使用して、prop プロパティがフリー プロパティであるかどうかを検出します。このメソッドはブール値を返します。所有プロパティである場合は true を返し、そうでない場合は false を返します。

in キーワードを使用して、オブジェクトとプロトタイプ チェーンに指定されたプロパティがあるかどうかを検出します。

テストコードは次のとおりです。

// Object.prototype.hasOwnProperty(prop) メソッドを使用して、所有プロパティであるかどうかを確認します console.log(fun.hasOwnProperty('name')) // true
console.log(fun.hasOwnProperty('print')) // false
// 存在しない属性が検出された場合も、結果は false になります
console.log(fun.hasOwnProperty('SayMe')) // true

// in 演算子経由 console.log('name' in fun) // true
console.log('print' in fun) // true
console.log('SayMe' in fun) // true

テストの結果、これら 2 つの方法ではプロパティが独自のプロパティであるかプロトタイプ プロパティであるかを検出できないことがわかりましたが、これら 2 つの方法を組み合わせると、独自のプロパティであるかプロトタイプ プロパティであるかを検出できます。

サンプルコードは次のとおりです。

関数 DetectionAttributes(obj, attr) {
  if (attr in obj) {
    obj.hasOwnProperty(attr) の場合 {
      // 独自の属性の場合は1を返す
      戻り値 1
    } それ以外 {
      // プロトタイププロパティの場合は0を返す
      0を返す
    }
  } それ以外 {
    // そのような属性がない場合は -1 を返します
    -1を返す
  }
}

テストは次のとおりです。

console.log(DetectionAttributes(fun, 'name')) // 1
console.log(DetectionAttributes(fun, 'print')) // 0
console.log(DetectionAttributes(fun, 'SayMe')) // 1

4. isPrototypeOf() メソッド

isPrototypeOf()メソッドは、オブジェクトが別のオブジェクトのプロトタイプ チェーン内に存在するかどうかを検出するために使用されます。存在する場合は true を返し、存在しない場合は false を返します。

サンプルコードは次のとおりです。

// プロトタイプオブジェクトに割り当てるオブジェクトを定義する var obj = function () {
  this.name = '一碗の周'
}
var Hero = function () {} // コンストラクタを定義する // 定義されたオブジェクトをコンストラクタのプロトタイプに割り当てる Hero.prototype = obj

// Hero を通じてオブジェクトを作成する var hero1 = new Hero()
var hero2 = 新しいHero()
// 作成された 2 つのオブジェクトが obj のプロトタイプ チェーン内にあるかどうかを判断します console.log(obj.isPrototypeOf(hero1)) // true
console.log(obj.isPrototypeOf(hero2)) // 真

5. 組み込みオブジェクトの拡張

JavaScript の組み込みオブジェクトの中には、 prototypeプロパティを持つものもあります。組み込みオブジェクトのprototypeプロパティを使用して、組み込みオブジェクトのプロパティとメソッドを拡張できます。

プロトタイプを通じて組み込みオブジェクトのプロパティとメソッドを拡張することは非常に柔軟であり、JavaScript 言語の具体的な内容は、個別の要件に応じて策定できます。

組み込みオブジェクトを拡張するには、次の 2 つの方法があります。

新しいプロパティとメソッドを直接追加します。

新しいプロパティまたはメソッドを追加するには、Object オブジェクトのdefineProperty()メソッドを使用します。この方法は、作成されたプロパティとメソッドがより安全であるため、最初の方法よりも優れています。

サンプルコードは次のとおりです。

// オブジェクトのプロパティとメソッドを拡張する // 最初のメソッドを使用する Object.prototype.MyPrint = function () {
  console.log('これはMyPrint()です')
}
// 2番目のメソッドを使用する Object.defineProperty(Object.prototype, 'MyInput', {
  値: 関数 () {
    console.log('これはMyInput()です')
  },
})
// Object.prototype.MyPrint() を呼び出す // これは MyPrint() です
Object.prototype.MyInput() // これはMyInput()です

6. 結論

この記事では、JavaScript におけるプロトタイプの概念、プロトタイプ プロパティ、独自のプロパティとプロトタイプ プロパティを検出する方法、組み込みオブジェクトを拡張する方法について説明します。

JavaScript プロトタイプの詳細に関するこの記事はこれで終わりです。JavaScript プロトタイプに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Javascript プロトタイプ
  • JavaScript の isPrototypeOf 関数
  • jsネイティブ構文プロトタイプ、__proto__、コンストラクタの徹底的な理解
  • JavaScriptはプロトタイププロパティを使用して継承操作を実装する例
  • JS 配列の次元削減の実装 Array.prototype.concat.apply([], arr)
  • 先頭と末尾のスペースを削除する js String.prototype.trim 文字の拡張
  • JavaScript __proto__ とプロトタイプ

<<:  動的な色切り替えの実装コードをサポートするために、CSS で SVG 画像を参照します。

>>:  Mysql データベースのマスタースレーブ同期構成

推薦する

ウェブページの画像を素早く表示する方法とテクニック

1. .jpg ではなく .gif を使用します。GIF は JPG に比べてサイズが小さくなります...

MySQL コマンドラインでよく使われる 18 個のコマンド

日常的なウェブサイトの保守と管理では、多くの SQL ステートメントが使用されます。熟練して使用する...

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

この SQL 書き込み方法では本当にインデックスが失敗するのでしょうか?

序文インターネット上には、MySQL でインデックスにヒットできないさまざまな状況をまとめた記事がよ...

Vueはミックスインを使用してコンポーネントを最適化します

目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

Nginx で WordPress を設定する方法

以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

Vueプロジェクトのパッケージングと展開の実際のプロセスの記録

目次序文1. 準備 - サーバーとnginxの使用1. サーバーを準備する2. nginxをインスト...

英語のシングルクォーテーション「''」を含むSQLの記述の失敗について徹底解説

問題が発生しました。情報の編集をテストする際、編集した内容に一重引用符 (') が含まれてい...

MySQL Workbench の使い方チュートリアルの詳しい説明

目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...

セマフォによるTomcatの異常終了の解決方法

最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...

Vueはechartsを使用して組織図を描画します

昨日、円形のプログレスバー (Vue 円形プログレスバーを参照してください) についてブログを書きま...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...