序文私は最近、新しい旅に備えて JavaScript の基礎知識を復習しています。そこで、学んだことの一部を記録し始めました。 今日の話題はjsのネイティブ継承方式です 話はこれくらいにして、コードに移りましょう。 まず、親クラスのコードです。 ここでは、親クラスとして Person クラスを作成します。そのコンストラクターには、name と age という 2 つのパラメーターが必要です。 次に、プロトタイプに sayHi メソッドを追加します。 // 親クラス関数 Person (name, age) { this.name = name || '名前なし'; this.age = 年齢 || 0; } Person.prototype.sayHi = 関数 () { console.log('こんにちは、私は ' + this.name + '、' + this.age + ' 歳です!'); } var p = new Person('A',20); p.sayHi();//こんにちは、私はAです。20歳です。 プロトタイプ継承//プロトタイプ継承関数 Teacher(){ } Teacher.prototype = new Person('B',22); Teacher.prototype.constructor=教師; var t = new Teacher(); t.sayHi();//こんにちは、私はBです。22歳です。 console.log(t instanceof Person);//true console.log(t instanceof 教師);//true アドバンテージ上記のコードから、Teacher インスタンスには Person のプロパティとメソッドがあることがわかります。そして、インスタンス オブジェクトは、Person のインスタンスであると同時に Teacher のインスタンスでもあります。そして、この継承方法は特に単純です。 欠点Teacher クラスの名前と年齢は、name=B、age=22 と固定されていることが簡単にわかります。つまり、親クラスのコンストラクターにパラメーターを自由に渡すことはできません。また、Teacher に複数のプロトタイプを指定することはできません。つまり、多重継承はできません。それでは次のコードを見てみましょう。 var t1 = 新しい教師(); var t2 = 新しい教師(); Teacher.prototype.name = "C"; t1.sayHi();//こんにちは、私はCです。22歳です。 t2.sayHi();//こんにちは、私は C です。22 歳です。 上記のコードでは、プロトタイプのプロパティまたはメソッドが変更されると、すべてのサブクラス インスタンスのプロパティとメソッドも変更されることがわかります。これは、プロトタイプ継承のもう 1 つの欠点です。つまり、すべてのサブクラスが同じプロトタイプ オブジェクトを共有するということです。 ここではプロトタイプについてお話します。プロトタイプについてはかなり前にエッセイを書きましたが、少し曖昧だったかもしれません。今の私の理解は当時とは違います。プロトタイプについては後日別のエッセイを書きます。 (完成したらリンクを添付します) コンストラクタの継承//コンストラクタは関数 Teacher (name, age) を継承します { Person.call(this, 名前, 年齢); } var t1 = 新しい教師('B'、22); var t2 = 新しい教師('C'、30); console.log(t1.name);//B console.log(t2.name);//C console.log(t1 instanceof Person); //false console.log(t1 instanceof 教師);//true t1.sayHi(); //TypeError: t1.sayHi は関数ではありません t2.sayHi(); //TypeError: t1.sayHi は関数ではありません アドバンテージプロトタイプ継承と比較すると、コンストラクタ継承は、すべてのサブクラスインスタンスが統一されたプロトタイプを共有するという問題を解決します。また、親クラスのコンストラクタにパラメータを渡すことができ、サブクラスのコンストラクタで複数の親クラスのコンストラクタを呼び出して、いわゆる多重継承を実現できます(ここで多重継承とは、サブクラスがcallやapplyなどのメソッドを通じて親クラスのコンストラクタを呼び出して、親クラスのプロパティとメソッドを持たせることを意味しますが、jsでは関数オブジェクトのプロトタイプは1つしかないため、プロトタイプチェーンの形式で多重継承を実際に反映することはできません)。 欠点上記のコードから、作成されたインスタンスはサブクラスのインスタンスのみであり、親クラスのインスタンスではないことがわかります。これは継承を直感的に反映できません。この継承方法では、親クラスのプロトタイプのプロパティとメソッドを継承できません。 組み合わせ継承// 結合継承関数 Teacher (name, age) { Person.call(this, 名前, 年齢); } Teacher.prototype = 新しい Person(); Teacher.prototype.constructor = Teacher; var t1 = 新しい教師('B'、22); var t2 = 新しい教師('C'、30); Teacher.prototype.name = "D"; console.log(t1.name);//B console.log(t2.name);//C t1.sayHi();//こんにちは、私はBです。22歳です。 t2.sayHi();//こんにちは、私は C です。30 歳です。 console.log(t1 instanceof Person);//true console.log(t1 instanceof 教師);//true 組み合わせ継承は、プロトタイプ継承とコンストラクター継承の利点を組み合わせ、2 つの方法の欠点の一部を解決します。ただし、サブクラスのインスタンスを作成するたびに、親クラスのインスタンスが作成されることがわかります。親クラスのインスタンスは同じインスタンスではありません (メモリ アドレスが異なります) が、プロパティとメソッドはまったく同じです。そのため、次の (寄生的な組み合わせ継承) メソッドを使用して改善し、不要なインスタンス構築を回避します。 寄生的な構成継承//寄生的な組み合わせ継承関数 教師(名前、年齢){ Person.call(this, 名前, 年齢); } Teacher.prototype = Object.create(Person.prototype); Teacher.prototype.constructor = Teacher; var t1 = 新しい教師('B'、22); var t2 = 新しい教師('C'、30); Teacher.prototype.name = "D"; console.log(t1.name);//B console.log(t2.name);//C t1.sayHi();//こんにちは、私はBです。22歳です。 t2.sayHi();//こんにちは、私は C です。30 歳です。 console.log(t1 instanceof Person);//true console.log(t1 instanceof 教師);//true 上記の方法は、サブクラスのインスタンスを作成せずに親クラスのインスタンスを作成する問題を解決します。これは、最も一般的に使用される js 継承方法でもあります。Babel を使用して ES6 のクラス継承を ES5 コードに変換すると、寄生的な組み合わせ継承が使用されていることがわかります。 要約するこれで、ネイティブ Javascript 継承方法とその長所と短所に関するこの記事は終了です。ネイティブ Javascript 継承方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)
最近、複数のdivにあるテーブルのTDを同じ幅に調整しても、揃えることができず、幅にパターンがないこ...
目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...
これは、W3C 組織が HTML4 に対して提示したスタイル推奨事項です。残念ながら、ブラウザが独自...
目次1. システム情報2. シャットダウン(システムのシャットダウン、再起動、ログアウト) 3. フ...
この記事では、例を使用して、MySQL データベースの最適化のためのテーブルおよびデータベース シャ...
CSS レイアウト - position プロパティposition 属性は、要素に適用する配置方法...
MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...
例を使って、Webページのヘッダー情報の意味を理解しましょう。 <!DOCTYPE HTML ...
目次序文ブラウザJS非同期実行の原理ブラウザのイベントループ実行スタックとタスクキューマクロタスクと...
導入簡単に言えば、tcpdump は、ネットワーク上のトラフィックをダンプし、ユーザーの定義に従って...
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...
成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...
DPlayer.jsビデオプレーヤープラグインは使いやすい主な用途: ビデオの再生、監視の開始、終了...
MySQL データベースにデータを挿入します。以前はよく使われていた INSERT INTO テーブ...