序文継承についてどれくらい知っていますか?どのような継承が最適でしょうか?継承に関するいくつかの知識ポイントを学び、その実装プロセスと利点と欠点を紹介します。 コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係まずそれらの関係を理解することで、継承をよりよく理解できるようになります プロトタイプチェーン継承コア: 親クラスのインスタンスをサブクラスのプロトタイプとして使用する コード実装プロセス: 関数 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プライベートサーバー構築原理とチュートリアル分析
<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...
以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...
1. 仮想マシンの準備1. 新しい仮想マシンを作成する 2. 仮想マシンのカスタマイズを選択する 3...
ZooKeeperとはZooKeeper は、分散アプリケーションに効率的で可用性の高い分散調整サ...
目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...
この記事の例では、Element+vueを使用して開始と終了の時間制限を実装するための具体的なコード...
フォーム送信コード1. ソースコード分析 <!DOCTYPE html> <htm...
この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...
まず、Alipay サンドボックスから一連のものをダウンロードします。多くのブログで取り上げられてお...
序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...
この記事では、MySQL 8.0.17のインストールと設定方法を参考までに紹介します。具体的な内容は...
1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...
この記事では、例を使用して、MySQL のさまざまな一般的な結合テーブルクエリについて説明します。ご...
1. MySQL 5.6をインストールした後、正常に有効化できないMySQL の圧縮バージョンは、解...
目次ZabbixはNginxを監視するZabbixはTomcatを監視するZabbixはMySQLを...