1. 概要1.1 プロトタイプとは何ですか? prototype プロパティは関数定義に含まれており、その初期値は空のオブジェクトです。 JavaScript では、関数に対して定義されたプリミティブ型はないため、プロトタイプは任意の型にすることができます。 プロトタイプは、オブジェクトの共有プロパティとメソッドを保存するために使用されます。プロトタイプのプロパティとメソッドは、関数自体のプロパティとメソッドには影響しません。 サンプルコードの検証は次のとおりです。 関数fun() { console.log('関数プロトタイプ') } console.log(fun.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 プロトタイプを入手するプロトタイプの概念と機能を理解した後、プロトタイプを操作する前に取得する必要があります。 コンストラクターの 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. プロトタイプのプロパティ
2.1 プロトタイプを使用してプロパティとメソッドを追加します。オブジェクトにプロパティとメソッドを追加する別の方法は、プロトタイプを通じて追加することです。プロトタイプ プロパティとプロトタイプ メソッドをコンストラクターに追加すると、コンストラクターによって新しく作成されたすべてのオブジェクトがプロパティとメソッドを共有します。 PS:いわゆるプロトタイプ プロパティまたはプロトタイプ メソッドは、プロトタイプを通じて追加されるプロパティまたはメソッドです。 プロパティとメソッドを追加する方法はいくつかあります。 属性やメソッドを直接追加する
プロトタイプにオブジェクトを直接追加します。 サンプルコードは次のとおりです。 //コンストラクタ関数 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 のほぼすべてのオブジェクトは参照によって渡されるため、作成する新しいオブジェクト エンティティごとにプロトタイプの独自のコピーは保持されません。つまり、 上記のコードを引き続き使用して、プロトタイプに新しいメソッドを追加して呼び出します。サンプル コードは次のとおりです。 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です') } これで、 //プロパティとメソッドにアクセスする console.log(fun.name) // Yiwan Zhou fun.SayMe() // これはSayMeです fun.print() // これは関数です
3.1 独自のプロパティまたはプロトタイププロパティの検出所有プロパティとプロトタイプ プロパティの概念と使用法はわかりましたが、プロパティがフリー プロパティかオリジナル プロパティかはどのようにしてわかるのでしょうか。JavaScript では、プロパティの状態を検出する次の 2 つの方法が用意されています。 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を返す } } テストは次のとおりです。
4. isPrototypeOf() メソッド
サンプルコードは次のとおりです。 // プロトタイプオブジェクトに割り当てるオブジェクトを定義する 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 の組み込みオブジェクトの中には、 プロトタイプを通じて組み込みオブジェクトのプロパティとメソッドを拡張することは非常に柔軟であり、JavaScript 言語の具体的な内容は、個別の要件に応じて策定できます。 組み込みオブジェクトを拡張するには、次の 2 つの方法があります。 新しいプロパティとメソッドを直接追加します。 新しいプロパティまたはメソッドを追加するには、Object オブジェクトの サンプルコードは次のとおりです。 // オブジェクトのプロパティとメソッドを拡張する // 最初のメソッドを使用する 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 動的な色切り替えの実装コードをサポートするために、CSS で SVG 画像を参照します。
自宅のルーターが300Mの帯域幅を80Mに強制的に減らしたため、3205Uソフトルーターを購入しまし...
ショートハンドプロパティは、複数のプロパティに同時に値を割り当てるために使用されます。たとえば、fo...
目次1.union: クエリ結果を追加できます1) すべてを結合: 重複を削除できません2) ユニオ...
結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...
1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...
以前は MySQL 5.7 を使用していましたが、MySQL にいくつか新しい機能が追加されたため、...
この記事はWindows 10のシステム環境をベースに、Reactの学習と使用について説明しています...
日常の開発では、データベースの追加、削除、変更、クエリが一般的に行われるため、Mysql で NUL...
mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...
目次導入:感情のインストール:一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...
翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...
esインストール docker pull elasticsearch:7.4.0 # -d : バッ...
<br />この記事は主に、初心者にXHTMLの基本知識と、XHTMLとHTMLの違いを...
1. ITミルツールキットIT Mill Toolkit は、リッチ Web アプリケーション用のウ...
目次1. フォークの起源2. 初期のUNIXオーバーレイ技術3. UNIXに導入される前のフォークの...