コンポジション継承組み合わせ継承は、疑似古典的継承とも呼ばれます。これは、昨日説明したプロトタイプ チェーンとコンストラクター盗難を組み合わせ、両方の利点を組み合わせたものです。その基本的な考え方は、プロトタイプ チェーンを使用してプロトタイプのプロパティとメソッドを継承し、コンストラクターを盗むことでインスタンスのプロパティを継承することです。これの利点は、プロトタイプで定義されたメソッドを再利用できることと、各インスタンスが独自のプロパティを持つことです。 関数 SuperType (名前) { this.name = 名前; this.colors = ["赤","黄","青"]; } SuperType.prototype.sayName = function(){ console.log(この名前) } 関数 SubType(名前,年齢){ SuperType.call(this,name); this.age = 年齢; } SubType.prototype = 新しい SuperType(); SubType.prototype.sayAge = function(){ コンソールにログ出力します。 } インスタンス = new SubType("jackson",22); instancel.colors.push("ピンク"); instancel.sayName(); // "ジャクソン" instancel.sayAge(); //22 console.log(instancel.colors); // ["赤", "黄", "青", "ピンク"] instance2 = new SubType("bear", 20); とします。 console.log(instance2.colors); // ["赤", "黄", "青"] instance2.sayName(); // "クマ"; instance2.sayAge(); // 20 上記のコードを見て、突然悟りを開いたような気分になりましたか? SubType は SuperType を呼び出して name を渡し、独自のプロパティ age を定義します。さらに、SubType.prototype も SuperType インスタンスに割り当てられます。プロトタイプが割り当てられると、このプロトタイプに sayage メソッドが追加され、2 つの subType インスタンスが作成されます。これらの 2 つのインスタンスには独自のプロパティがあり、同じメソッドを共有できます。 組み合わせ継承は、プロトタイプ チェーンとスティール コンストラクターの欠点を補うものであり、js で最もよく使用される継承モードです。 寄生遺伝寄生継承とは、オブジェクトを関数でラップし、この関数の呼び出しを返すことです。この関数は、自由にプロパティを追加できるインスタンスまたはオブジェクトになります。これが object.create() の原理です。 // 寄生継承関数subobject(obj) { clone = Object(obj); を作成します。 clone.sayName = 関数(){ console.log("ジャクソン") }; クローンを返します。 } サブ = { 名前:"クマ" } sup = サブオブジェクト(sub)とします。 sup.sayName();//ジャクソン この例では、sub オブジェクトに基づいて新しいオブジェクトを返します。返される sup オブジェクトには、sub のプロパティとメソッド、および新しいメソッド sayName() が含まれます。
寄生継承を通じてオブジェクトに関数を追加すると、コンストラクター パターンと同様に、関数の再利用が困難になる可能性があることに注意してください。 寄生的な構成継承複合継承には、効率に関する特定の問題があります。親クラスのコンストラクターは常に 2 回呼び出されます。1 回はサブクラスのプロトタイプを作成するとき、もう 1 回はサブクラスのコンストラクターで呼び出されます。基本的に、サブクラスは実行時に独自のプロトタイプを書き換えるだけで済みます。 関数 inheritPrototype(サブタイプ、スーパータイプ) { let prototype = Object(superType.prototype); // オブジェクトの作成 prototype.constructor = subType; // 拡張オブジェクト subType.prototype = prototype; // オブジェクトの割り当て } この inheritPrototype() 関数は、寄生的な構成継承のコア ロジックを実装します。この関数は、サブクラスのコンストラクターと親クラスのコンストラクターの 2 つのパラメーターを受け取ります。この関数内では、最初のステップは親クラスのプロトタイプのコピーを作成することです。次に、返されたプロトタイプ オブジェクトのコンストラクター プロパティを設定して、プロトタイプのオーバーライドによってデフォルトのコンストラクターが失われる問題を解決します。最後に、新しく作成されたオブジェクトがサブタイプのプロトタイプに割り当てられます。次の例に示すように、inheritPrototype() を呼び出すと、前の例のサブタイプ プロトタイプの割り当てを実装できます。 関数SuperType(名前) { this.name = 名前; this.colors = ["赤", "青", "緑"]; } SuperType.prototype.sayName = 関数 () { コンソールにログ出力します。 }; 関数 SubType(名前, 年齢) { SuperType.call(this、名前); this.age = 年齢; } プロトタイプを継承します(サブタイプ、スーパータイプ)。 SubType.prototype.sayAge = 関数 () { コンソールにログ出力します。 }; ここでは、SuperType コンストラクターは 1 回だけ呼び出され、SubType.prototype 上の不要な未使用のプロパティが回避されるため、この例はより効率的であると言えます。そしてプロトタイプチェーンは今もそのまま残っています。 要約するJavaScript の寄生的構成継承に関するこの記事はこれで終わりです。より関連性の高い JS の寄生的構成継承のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ハンドラー PageHandlerFactory-Integrated のモジュール リストに不正なモジュール ManagedPipelineHandler が含まれています
>>: Mysql general_log をクリーンアップする方法の概要
公式文書には次のように記されている。ルーターを挿入することで、どのコンポーネントでも this.$r...
例えば:コードをコピーコードは次のとおりです。 <input type="check...
序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...
MySQL 全文検索中国語ソリューション最近、会社のプロジェクトで、データベースで中国語を検索する機...
まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...
1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...
新しいプロジェクトは基本的に終了しました。フロントエンドとバックエンドを分離して統合を完了したのは初...
新しいテーブルを作成する テーブル「人」を作成します( `id` int NOT NULL COMM...
Dockerをインストールするyumパッケージを最新バージョンに更新します: sudo yum up...
1. よく使われるHTMLタグの最適化HTML は Web 編集者にとって基本的なスキルであるべきで...
序文: Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます効果画像: 1. コンテ...
序文ヒストグラムは、RDBMS によって提供される基本的な統計情報です。最も一般的に使用されるのは、...
目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...
Web フロントエンド開発のプロセスでは、UI デザイナーはグラデーション テキストを使用したデザイ...
⑴ 内容によって形式が決まります。まず内容を充実させ、次にブロックに分割し、トーンを決め、最後に細部...