序文継承についてどれくらい知っていますか?どのような継承が最適でしょうか?継承に関するいくつかの知識ポイントを学び、その実装プロセスと利点と欠点を紹介します。 コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係まずそれらの関係を理解することで、継承をよりよく理解できるようになります プロトタイプチェーン継承コア: 親クラスのインスタンスをサブクラスのプロトタイプとして使用する コード実装プロセス: 関数 Parent(名前){ this.name = 名前 || 'xt', this.arr = [1] } 関数Son(年齢){ this.age = 年齢 } Parent.prototype.say = function() { //親クラスのプロトタイプで再利用および共有する必要があるメソッドを定義します。console.log('hello'); } Son.prototype = 新しい親() s1 = 新しいSon(18)とする s2 = new Son(19)とする console.log(s1.say() === s2.say()); //true console.log(s1.name,s1.age); //xt 18 console.log(s2.name,s2.age); //xt 19 s1.arr.push(2) console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ] アドバンテージ: インスタンスが継承できる属性は、インスタンスのコンストラクターの属性、親クラスのコンストラクターの属性、および親クラスのプロトタイプの属性です。 (新しいインスタンスは親クラス インスタンスのプロパティを継承しません!) 欠点:
コンストラクタ継承の借用コア: 親クラスのコンストラクターを使用して子クラスのインスタンスを拡張します。これは、親クラスのインスタンス属性を子クラスにコピーすることと同じです。 コード実装: 関数 親(名前) { this.name = 名前; this.arr = [1], this.say = function() { console.log('hello') } } 関数 Son(名前, 年齢) { Parent.call(this, name) //親クラスのインスタンスプロパティとメソッドをコピーします this.age = age } s1 = new Son('小谭', 18) とします。 s2 = new Son('Xiaoming', 19) とします。 console.log(s1.say === s2.say) //false メソッドは再利用できません。メソッドは独立しており、共有されていません。 console.log(s1.name, s1.age); //Xiao Tan 18 console.log(s2.name, s2.age); //Xiaoming19 s1.arr.push(2) console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ] アドバンテージ:
欠点:
プロトタイプ継承コア: オブジェクトを関数でラップし、この関数の呼び出しを返します。この関数は、任意に属性を追加できるインスタンスまたはオブジェクトになります。 関数 親(名前) { this.name = 'xt'; this.arr = [1] } 関数オブジェクト(obj){ 関数 F(){} F.プロトタイプ = obj; 新しいF()を返します。 } s1 = 新しい親(オブジェクト) s1.name = 'シャオミン' s1.arr.push(2) s2 = 新しい親(オブジェクト) console.log(s1.name,s2.name); // Xiaoming xt console.log(s1.arr, s2.arr); //[ 1, 2 ] [ 1 ] 欠点:
寄生遺伝コア: プロトタイプ継承に基づいてオブジェクトを拡張し、コンストラクタを返す 関数 親(名前) { this.name = 'xt'; this.arr = [1] } 関数オブジェクト(obj){ 関数 F(){} F.プロトタイプ = obj; 新しいF()を返します。 } 息子 = 新しい親() 関数addobject(obj){ var add = オブジェクト(obj) add.name = 'シャオバイ' 戻る追加 } var s1 = addobject(息子) console.log(s1.name); //小白 欠点:
結合継承(プロトタイプチェーン継承と借用コンストラクタ継承の組み合わせ)コア: 親クラスのコンストラクターを呼び出すことで、親クラスのプロパティが継承され、パラメーター渡しの利点が保持されます。次に、親クラスのインスタンスをサブクラスのプロトタイプとして使用することで、関数の再利用が実現されます。 コード実装: 関数 親(名前) { this.name = 名前; this.arr = [1] } Parent.prototype.say = function () { console.log('hello') } 関数 Son(名前, 年齢) { Parent.call(this, name) // 2回目 this.age = age } Parent.prototype = new Son() // 一度、let s1 = new Son('小谭', 18) s2 = new Son('Xiaoming', 19) とします。 console.log(s1.say === s2.say) // 真 console.log(s1.name, s1.age); //シャオタン18 console.log(s2.name, s2.age); //Xiaoming19 s1.arr.push(2) console.log(s1.arr, s2.arr); // [ 1, 2 ] [ 1 ] は親クラスの参照プロパティを共有しません。 アドバンテージ:
欠点:
寄生的組み合わせ継承コア: パラメータを渡すための借用コンストラクタと継承を実現するための寄生パターンを組み合わせる 関数 Parent(名前){ this.name = 名前 || 'xt', this.arr = [1] } 関数 Son(名前,年齢){ Parent.call(this,name) // コア this.age = 年齢 } Parent.prototype.say = function() { コンソールにログ出力します。 } Son.prototype = Object.create(Parent.prototype) // コアは中間オブジェクトを作成し、子クラスのプロトタイプと親クラスのプロトタイプは分離されます。 Son.prototype.constructor = Son p1 = 新しい親() s1 = new Son("Xiaohong",18) とします。 s2 = new Son("小黒",19) とします。 console.log(p1.constructor); //[関数: 親] console.log(s1.constructor); // [関数: Son] console.log(s1.say() === s2.say()); //true console.log(s1.name,s1.age); // シャオホン 18 console.log(s2.name,s2.age); //リトルブラック19 s1.arr.push(2) console.log(s1.arr,s2.arr); // [ 1, 2 ] [ 1, 2 ] 寄生的合成継承は参照型継承の最良の継承とみなすことができる 要約するJS継承に関する記事はこれで終了です。JS継承についてさらに詳しく知りたい方は、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MYSQL パフォーマンス アナライザー EXPLAIN 使用例分析
>>: Nexusプライベートサーバー構築原理とチュートリアル分析
Navicatをインストールした後次のエラーが発生する場合があります: Client does no...
Gitlab と Github の違いについては、あまり説明する必要はありません。一言でまとめると、...
HTMLでは、中国語のフレーズ「學好好學」は「學好好學」と表現できます。プロジェクトでは、SMSアラ...
目次序文問題の説明原因分析拡大する総括する序文最近、データの欠落やデータの損失に関するフィードバック...
目次1. ビューフック1. ngAfterViewInit および ngAfterViewCheck...
解決Docker for Macに付属するLinux仮想マシン(軽量ですが、ソケットファイルを使用し...
目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...
1.アルパインイメージをダウンロードする [root@docker43 ~]# docker pul...
目次1. 共有ロックと排他ロック2. 意図ロック3. レコードロック4. ギャップロック5. ネクス...
目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...
この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...
目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...
Weibo ユーザーのフォローを一括で解除するクールな JavaScript コードWeibo には...
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
開発には常にデータが必要です。サーバーとしての Linux では、テスト データを格納するためのデー...