プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な考え方は、プロトタイプを通じて複数の参照型のプロパティとメソッドを継承することです。プロトタイプ チェーンとは何ですか? 各コンストラクターにはプロトタイプ オブジェクトがあります。コンストラクターを呼び出すことによって作成されたインスタンスには、プロトタイプ オブジェクトを指すポインター __proto__ があります。このプロトタイプは別の型のインスタンスである可能性があり、内部に別のプロトタイプを指すポインターもある可能性があり、プロトタイプ チェーンが形成されます。 コード: 関数SuperType() { this.property は true です。 } SuperType.prototype.getSuperValue = 関数() { this.property を返します。 }; 関数サブタイプ() { this.subproperty = false; } // スーパータイプを継承 SubType.prototype = 新しい SuperType(); SubType.prototype.getSubValue = function () { //オブジェクトリテラルを通じて新しいメソッドを追加できないことに注意してください。そうしないと、前の行が無効になります。 return this.subproperty; }; インスタンスを新しい SubType() にします。 console.log(instance.getSuperValue()); // 真 欠点 1. 親クラスインスタンスの属性が参照型の場合、親クラスのインスタンス属性はサブクラスのプロトタイプ属性になります。サブクラスによって作成されたすべてのインスタンスはこれらのメソッドを共有します。1 つのインスタンスの属性が変更されると、他のインスタンスの属性も変更されます。 2. サブタイプはインスタンス化時に親タイプのコンストラクタにパラメータを渡すことができない コンストラクタの継承参照値を含むプロトタイプによって発生する継承問題を解決するために、「オブジェクト マスカレード」または「古典的継承」としても知られる「コンストラクタの窃盗」と呼ばれる手法が普及しました。その考え方は、サブクラスでコンストラクタを使用するというものです。 親クラスのコンストラクターが番号で呼び出されます。 call() メソッドと apply() メソッドを使用して、新しく作成されたオブジェクトをコンテキストとして関数を実行できます。 関数SuperType(名前) { this.colors = ["赤","青","緑"]; this.name = 名前; } 関数サブタイプ(名前) { SuperType.call(this,name); } インスタンス1 = 新しいスーパータイプ('Xiaoming') let instance2 = new SuperType('小白') インスタンス1.colors.push('黄色') console.log(instance1) //{name:"Xiao Ming",colors:["red","blue","green","yellow"]...} console.log(instance2) //{name:"Xiaobai",colors:["red","blue","green"]...} //パラメータを渡して参照の問題を修正できます。複数のコンストラクタプロパティを継承できます(複数呼び出し) 欠点: 1. メソッドはコンストラクタ内でのみ呼び出すことができます。関数は再利用できません。つまり、サブクラスがインスタンスを生成するたびに、属性とメソッドが 1 回生成されます。 コンポジション継承プロトタイプ チェーンとコンストラクターを組み合わせて、両方の利点を組み合わせます。基本的な考え方は、プロトタイプ チェーンを使用してプロトタイプのプロパティとメソッドを継承し、コンストラクターを通じてインスタンス プロパティを継承することです。これにより、プロトタイプ上でメソッドを定義して再利用できるようになると同時に、各インスタンスに独自のプロパティを持たせることもできます。 関数SuperType(名前){ this.name = 名前; this.colors = ["赤","青","緑"]; } SuperType.prototype.sayName = 関数() { コンソールにログ出力します。 }; 関数 SubType(名前, 年齢){ // 継承されたプロパティ 2 番目の呼び出し SuperType.call(this, name); this.age = 年齢; } // 継承されたメソッドの最初の呼び出し SubType.prototype = new SuperType(); SubType.prototype.sayAge = function() { コンソールにログ出力します。 }; instance1 = new SubType("Nicholas", 29); とします。 instance1.colors.push("黒"); console.log(instance1.colors); //["赤、青、緑、黒"] instance1.sayName(); // "ニコラス"; instance1.sayAge(); // 29 instance2 = new SubType("Greg", 27); とします。 console.log(instance2.colors); // ["赤、青、緑"] instance2.sayName(); // "グレッグ"; instance2.sayAge(); // 27 //親クラスのプロトタイプのプロパティを継承し、パラメータを渡し、再利用することができます。 各新しいインスタンスによって導入されるコンストラクタプロパティはプライベートです 欠点 親クラスのコンストラクタを2回呼び出すと、より多くのメモリが消費されます。 プロトタイプ継承カスタムタイプを定義しなくても、プロトタイプを通じてオブジェクト間で情報を共有できます。 関数オブジェクト(人) { 関数 F() {} F.プロトタイプ = 人 新しいF()を返す } 人 = { 名前:「シャオミン」 色:['赤','青'] } person1 = オブジェクト(人)とする person1.colors.push('緑') person2 = オブジェクト(人)とする person1.colors.push('黄色') console.log(person) //['赤','青','緑','黄'] 適用可能な環境: オブジェクトがあり、それに基づいて新しいオブジェクトを作成したい場合。まずこのオブジェクトを object() に渡し、返されたオブジェクトを適切に変更する必要があります。最初のパラメータのみが渡された場合の Object.create() と同様に、渡されたオブジェクトの浅いコピーが本質的に作成されます。欠点は、新しいインスタンスのプロパティが後で追加され、再利用できないことです。 寄生遺伝プロトタイプ継承に近い継承のタイプは寄生継承です。これは寄生コンストラクターやファクトリー パターンに似ています。継承を実装する関数を作成し、何らかの方法でオブジェクトを拡張してから、オブジェクトを返します。 関数オブジェクト(人) { 関数 F() {} F.プロトタイプ = 人 新しいF()を返す } 関数createAnother(オリジナル){ let clone = object(original); // 関数を呼び出して新しいオブジェクトを作成します clone.sayHi = function() { // 何らかの方法でこのオブジェクトを強化します console.log("hi"); }; return clone; // このオブジェクトを返す} 寄生継承は、主にオブジェクトに関心があり、型やコンストラクターを気にしないシナリオにも適しています。 寄生的な構成継承最も一般的に使用される継承方法が最適です。結合継承では親クラスのコンストラクターが 2 回呼び出されるため、効率の問題が生じます。実際、サブクラス プロトタイプの本質は、親クラス オブジェクトのすべてのインスタンス プロパティを含めることです。サブクラス コンストラクターは、実行時に独自のプロトタイプを書き換えるだけで済みます。基本的な考え方は、親クラスのコンストラクターを呼び出してサブクラスのプロトタイプに値を割り当てるのではなく、親クラスのプロトタイプのコピーを取得することです。最終的には、寄生継承を使用して親クラスのプロトタイプを継承し、返された新しいオブジェクトを子クラスのプロトタイプに割り当てます。 //コアコード function object(person) { 関数 F(パラメータ) {} F.プロトタイプ = 人 新しいF()を返す } 関数 inheritPrototype(サブタイプ、スーパータイプ) { let prototype = object(SuperType.prototype) //親クラスのプロトタイプのコピーを生成する //このインスタンスのコンストラクタをオーバーライドする prototype.constructor = サブタイプ //このオブジェクトのコピーをサブクラスのプロトタイプに割り当てます。SubType.prototype = prototype } 関数SuperType(名前) { this.name = 名前; this.colors = ["赤","青","緑"]; } SuperType.prototype.sayName = 関数() { コンソールにログ出力します。 }; 関数 SubType(名前, 年齢) { SuperType.call(this、名前); this.age = 年齢; } //inheritPrototype 関数を呼び出してサブクラスのプロトタイプ値を割り当て、結合継承の問題を修正します。inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function() { コンソールにログ出力します。 }; 要約するこれで、js 継承の 6 つの方法についての記事は終了です。より関連性の高い js 継承コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: crontab 実行時間とシステム時間の不一致の解決方法
>>: Alibaba Cloud Linux CentOS 7.2 で自作 MySQL のルートパスワードを忘れた場合の解決方法
目次1. Bootstrapグリッドシステムの仕組み1.1 12グリッドシステム1.2 Bootst...
画像リンク <img src="" /> jsを使用してURLが有効...
ブラウザ モジュールの主な機能は、http リクエスト ヘッダーの「User-Agent」の値とブラ...
Shopify Plus は、私たちが設立した e コマース プラットフォームのエンタープライズ バ...
1. ネクサスサービス構築の意義イントラネットの統合プロキシとして、チームで共同開発する場合、全員が...
cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...
1. VPSとCentOSシステムを購入しましたが、サーバーの時間が北京時間と一致せず、時差があるこ...
バックグラウンド コントローラー @RequestMapping("/getPDFStre...
NFSが提供するサービスマウント: サーバー上で /usr/sbin/rpc.mountd サーボ ...
1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...
目次Webコンポーネントカスタム要素概要HTMLTemplateElement コンテンツ テンプレ...
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...
SELECT * FROM テーブル名制限m,n; SELECT * FROM テーブル LIMI...