序文継承についてどれくらい知っていますか?どのような継承が最適でしょうか?継承に関するいくつかの知識ポイントを学び、その実装プロセスと利点と欠点を紹介します。 コンストラクタ、プロトタイプオブジェクト、インスタンスオブジェクトの関係まずそれらの関係を理解することで、継承をよりよく理解できるようになります プロトタイプチェーン継承コア: 親クラスのインスタンスをサブクラスのプロトタイプとして使用する コード実装プロセス: 関数 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. CDから仮想マシンを起動する2. GPartedツールを使用してパーティション...
目次1. 準備2. 説明計画の概要3. フィールドの詳細な説明4. パーティションクエリにはパーティ...
目次目的npm init および package.json ファイルモジュールのインストールと管理モ...
コアSQL文数字を含まない MySQL クエリ ステートメント: SELECT * FROM tes...
docker-compose-monitor.yml バージョン: '2' ネットワ...
1. まずSELECT文を実行して、すべての切り捨て文を生成します。ステートメント形式: selec...
この記事では、無限ループスクロールを実現するためのReactの具体的なコードを参考までに紹介します。...
現在、このような要件があります。ログインした人がカスタマー サービス担当者である場合、注文は「このカ...
目次1. レシピ集1.1 プロジェクトの背景1.2 テクノロジースタック1.3 開発環境1.4. プ...
注意: .NET FrameWork はコア モードで実行できないため、コア インストール モードの...
序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...
目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...
序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...
かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...
OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...