序文継承についてどれくらい知っていますか?どのような継承が最適でしょうか?継承に関するいくつかの知識ポイントを学び、その実装プロセスと利点と欠点を紹介します。 コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係まずそれらの関係を理解することで、継承をよりよく理解できるようになります プロトタイプチェーン継承コア: 親クラスのインスタンスをサブクラスのプロトタイプとして使用する コード実装プロセス: 関数 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プライベートサーバー構築原理とチュートリアル分析
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
Yum (フルネームは Yellow dog Updater, Modified) は、Fedora...
今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...
この記事では、MySQL の左結合における on 条件と where 条件の使用法の違いを例を使って...
目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...
目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...
<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおり...
1. Spring Boot は jsp jar パッケージをサポートしていません。jsp は wa...
目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...
場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...
序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...
序文今日、Xianyuを閲覧していたとき、各行の高さが同じではないことに気付きました。調べてみると、...
node を D ドライブにインストールしましたが、C ドライブのスペースを占有したくなかったため、...
DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...
Vue+Openlayerはmodifyを使って要素を変更します。具体的な内容は以下のとおりです。 ...