ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明

ネイティブ JavaScript 継承方法とその長所と短所の詳細な説明

序文

私は最近、新しい旅に備えて 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 1 つの記事で JavaScript の継承を理解する
  • js の一般的な継承方法 6 つの概要
  • JS上級編ES6の6つの継承方法
  • JS の 6 つの継承方法とその長所と短所
  • jsの継承の6つの方法を詳しく解説
  • JavaScriptで継承を実装するいくつかの方法
  • 6 つの JavaScript 継承方法とその長所と短所 (まとめ)
  • JS で継承を実装する一般的な方法の例
  • JavaScriptで複数の継承メソッドを共有する

<<:  Win10 VM 仮想マシンに Mac OS10.14 を完璧にインストールする (グラフィック チュートリアル)

>>:  MySQLステートメントを監視する方法の詳細な説明

推薦する

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

CSS の :focus-within の楽しさについて簡単に説明します

Bステーションでパスワードを入力するときに目を覆っているこの画像を見たことがある人もいると思いますこ...

Linuxシステムの操作レベルの詳細な紹介

目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...

条件付きコメント形式の書き方とサンプルコード

フロントエンドエンジニアとして、IE は私たちにとって馴染み深いものであるはずです。設計案を実装する...

RGBカラーテーブルコレクション

RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...

Linux で文字化けしたファイルや特殊文字のファイルを削除する方法

エンコーディングの理由により、Linux サーバーに中国語のファイルやディレクトリをアップロードまた...

Ubuntu mysqlログイン名とパスワードを表示および変更し、phpmyadminをインストールする

MySQLをインストールした後、ターミナルでmysql -u root -pと入力してEnterを押...

タグが新しいページを開くかどうかという問題。主要ウェブサイトの開設状況をまとめました

a タグが新しいページを開くかどうか: (1)百度百科事典:ヘッダーが異なる場合は新しいページが開き...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...

Bootstrap 3.0 学習ノートボタンスタイル

この記事では主にボタンのスタイルについて説明します。 1. オプション2. サイズ3. 活動状況4....

CentOS 7 で MySQL 5.7 をインストールして設定する

この記事では、以下の環境をテストします。 CentOS 7 64 ビット 最小 MySQL 5.7 ...

JavaScript イベント委任の原則

目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...

純粋なテキストとアイコン付きのボタンを実現するための HTML+CSS

この記事では、いくつかの基本的なページ要素の実装方法をまとめており、後で更新される予定です。まず、私...

Linux コマンドで .sql ファイルをエクスポートおよびインポートする方法

この記事では、Linux コマンドを使用して .sql ファイルをエクスポートおよびインポートする方...

docker cp ファイルをコピーしてコンテナに入る

実行中のコンテナに入る # コンテナに入り、新しいターミナルを開きます# docker exec -...