1. プロトタイプチェーン継承関数親(){ this.name = 'ケビン'; } Parent.prototype.getName = 関数 () { コンソールにログ出力します。 } 関数子() { } Child.prototype = 新しい Parent(); var child1 = 新しい Child(); console.log(child1.getName()) // ケビン 質問: 1. 参照型のプロパティはすべてのインスタンスで共有されます。例: 関数親(){ this.names = ['ケビン'、'デイジー']; } 関数子() { } Child.prototype = 新しい Parent(); var child1 = 新しい Child(); child1.names.push('やゆ'); console.log(child1.names); // ["ケビン", "デイジー", "ヤユ"] var child2 = 新しい Child(); console.log(child2.names); // ["ケビン", "デイジー", "ヤユ"] 2. 子のインスタンスを作成するときに、親にパラメータを渡すことはできません。 2. コンストラクタの借用(古典的な継承)関数親(){ this.names = ['ケビン'、'デイジー']; } 関数子() { 親.call(これを); } var child1 = 新しい Child(); child1.names.push('やゆ'); console.log(child1.names); // ["ケビン", "デイジー", "ヤユ"] var child2 = 新しい Child(); console.log(child2.names); // ["ケビン", "デイジー"] アドバンテージ:
例えば: 関数 親 (名前) { this.name = 名前; } 関数 子 (名前) { Parent.call(これ、名前); } var child1 = 新しい Child('kevin'); console.log(child1.name); // ケビン var child2 = 新しい Child('daisy'); console.log(child2.name); // デイジー 欠点:
3. 組み合わせ継承プロトタイプ継承と従来の継承は連携して動作します。 関数 親 (名前) { this.name = 名前; this.colors = ['赤', '青', '緑']; } Parent.prototype.getName = 関数 () { console.log(この名前) } 関数 子供 (名前, 年齢) { Parent.call(これ、名前); this.age = 年齢; } Child.prototype = 新しい Parent(); var child1 = 新しい Child('kevin', '18'); child1.colors.push('黒'); console.log(child1.name); // ケビン console.log(child1.age); // 18 console.log(child1.colors); // ["赤", "青", "緑", "黒"] var child2 = 新しい Child('daisy', '20'); console.log(child2.name); // デイジー console.log(child2.age); // 20 console.log(child2.colors); // ["赤", "青", "緑"] 利点:プロトタイプ チェーン継承とコンストラクター関数の利点を組み合わせたもので、JavaScript で最も一般的に使用される継承モードです。 4. プロトタイプの継承関数createObj(o) { 関数 F(){} F.プロトタイプ = o; 新しいF()を返します。 } これは、渡されたオブジェクトを作成されたオブジェクトのプロトタイプとして使用する デメリット:参照型を含むプロパティ値は、プロトタイプ チェーン継承と同様に、常に対応する値を共有します。 var 人 = { 名前: 'ケビン'、 友達: ['デイジー', 'ケリー'] } var person1 = createObj(person); var person2 = createObj(person); person1.name = 'person1'; console.log(person2.name); // ケビン person1.friends.push('テイラー'); console.log(person2.friends); // ["デイジー", "ケリー", "テイラー"]
5. 寄生遺伝継承プロセスをカプセル化するためだけに使用され、何らかの形でオブジェクトを内部的に拡張し、最終的にオブジェクトを返す関数を作成します。 関数createObj(o){ var clone = object.create(o); clone.sayName = 関数 () { コンソールにログ出力します。 } クローンを返します。 } デメリット:借用コンストラクター パターンと同様に、オブジェクトが作成されるたびにメソッドが作成されます。 6. 寄生的組み合わせ継承便宜上、結合された継承コードをここで繰り返します。 関数 親 (名前) { this.name = 名前; this.colors = ['赤', '青', '緑']; } Parent.prototype.getName = 関数(){ console.log(この名前) } 関数 子供 (名前, 年齢) { Parent.call(これ、名前); this.age = 年齢; } Child.prototype = 新しい Parent(); var child1 = 新しい Child('kevin', '18'); コンソールログ(子1) 複合継承の最大の欠点は、親コンストラクターが 2 回呼び出されることです。 1 回目は、サブタイプ インスタンスのプロトタイプを設定するときです。 Child.prototype = 新しい Parent(); サブタイプのインスタンスを作成するとき: var child1 = 新しい Child('kevin', '18'); new のシミュレーション実装を思い出してください。実際、この文では以下を実行します。 Parent.call(これ、名前); ここで、Parent コンストラクターを再度呼び出します。 したがって、この例では、 では、今回はどうすれば卓越性を追求し、重複した電話を避けることができるのでしょうか? どのように実装されているかをご覧ください: 関数 親 (名前) { this.name = 名前; this.colors = ['赤', '青', '緑']; } Parent.prototype.getName = 関数 () { console.log(この名前) } 関数 子供 (名前, 年齢) { Parent.call(これ、名前); this.age = 年齢; } // 3 つの重要なステップ var F = function () {}; F.prototype = 親.prototype; Child.prototype = 新しい F(); var child1 = 新しい Child('kevin', '18'); コンソールにログ出力します。 最後に、この継承メソッドをカプセル化します。 関数オブジェクト(o) { 関数 F() {} F.プロトタイプ = o; 新しいF()を返します。 } 関数プロトタイプ(子, 親) { var プロトタイプ = オブジェクト(parent.prototype); プロトタイプ.コンストラクタ = 子; child.prototype = プロトタイプ; } // 使用する場合: プロトタイプ(子、親); 「Advanced JavaScript Programming」における寄生的組み合わせ継承の称賛を引用します。 このアプローチの効率性は、 JavaScript の継承のさまざまな方法とそのメリットとデメリットについて詳しく説明しました。JavaScript の継承のさまざまな方法とそのメリットとデメリットの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 負荷分散と動的および静的分離操作を実現するDocker NginxコンテナとTomcatコンテナ
目次エージェントとは何かプロキシの基礎知識ハンドラオブジェクトのメソッドプロキシでできること参考文献...
vertical-align属性は、主にインライン要素の配置を変更するために使用されます。インライン...
この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...
1. はじめにこの記事には MySQL インストール部分のスクリーンショットがないので、ある程度の基...
序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...
CSS でテキストを中央揃えにするプロパティは非常に簡単に実現できます。text-align:cen...
DOMContentLoaded イベント文字通り、DOM がロードされた後に実行されます。 win...
方法1: lsofコマンドを使用するlsof コマンドを使用して、ポートが開いているかどうかを確認で...
1. イメージをプルするまず、次のコマンドを実行して、イメージをローカル コンピューターにダウンロー...
コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...
<br />これは私がずっと前に集めた記事です。皆さんの参考のために共有したいと思います...
JavaScript DOM を読み終えた後、解釈型 JavaScript スクリプト言語に対する...
日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...
具体的な方法:ステップ1: mysqlサービスを停止する /etc/init.d/mysqld を停...
Harborのインストールは非常に簡単ですが、Dockerログインで行き詰まってしまいました。このブ...