継承を実装するために JavaScript を使用する必要があるのはなぜですか?いくつかの継承方法の例を詳しく解説

継承を実装するために JavaScript を使用する必要があるのはなぜですか?

初期の PC マシンのパフォーマンスは、すべてサーバー側にかかっており、クライアントのブラウザは純粋に装飾のためのものです。当時は人気のあったテーブル レイアウトと電話回線によるインターネット アクセスも相まって、Web ページの閲覧は非常に遅かったのですが、現在ではインターネット時代が急速に発展しており、パーソナル コンピュータのハードウェアは大幅に改良されており、クライアント ブラウザのパフォーマンスも非常に残念なものとなっています。 Web 開発のモデルも静かに変化しています。サーバーは以前ほど「ハード」ではなくなり、その代わりにブラウザーができるだけ多くのタスクを引き受けるだけでなく、各クライアントに負担が分散されます。企業 コストの節約により、Web フロントエンド開発がより興味深いものになります。ますます多くのフロントエンド フレームワークが登場し、さらに多くのフロントエンド MVC フレームワークが登場しています。この文脈において、JavaScript の役割は単純な検証を行ったり、リクエストを送信したり、DOM を操作したりするだけではありません。フロントエンドのルーティングやビジネス層など、より多くの役割を果たす必要があり、JavaScript は多くの論理的な処理を実行する必要があります。タスクには、フロントエンド データ (モデル) の抽象化が含まれており、オブジェクト指向の思考を使用することによってのみ、抽象化されたデータを適切に処理できるため、ここでは継承が非常に重要です。

次に、基本的な属性の名前と年齢を持つ person という名前のモデルを抽出します。デフォルトでは、全員が話すことができるため、各インスタンスのプロトタイプ オブジェクトに発話機能が配置されています。さて、人間の場合は、人の基本属性を継承し、これに基づいて独自の固有の属性を追加する必要があります。

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
  //my own properties
}

いくつかの主流の継承メソッド:

1. プロトタイプチェーンの継承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man() {
}
Man.prototype = new Person('pursue');
var man1 = new Man();
man1.say(); //hello, my name is pursue
var man2 = new Man();
console.log(man1.say === man2.say);//true
console.log(man1.name === man2.name);//true

この継承メソッドは、上記の person (インスタンスとプロトタイプ) のすべての属性メソッドを取得するために非常に直接的です。 )、親クラスのインスタンス new Person('pursue') をサブクラスのプロトタイプに直接割り当てます。実際、サブクラスのインスタンス man1 と man2 自体は完全に空のオブジェクトであり、すべての属性とメソッドをプロトタイプ化する必要があります。チェーンを検索して、見つかった属性メソッドが同じになるようにします。
したがって、プロトタイプチェーンの継承を直接使用するのは非現実的です。

2. コンストラクターの継承を使用します

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
//Man.prototype = new Person('pursue');
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
man1.say(); //say is not a function

ここで、サブクラスはコンストラクターで apply を使用して親クラスのコンストラクターを呼び出し、親クラスのプロパティを継承する効果を実現します。プロトタイプチェーンを直接使用するよりも多くのインスタンスがあり、少なくとも各インスタンスは独自のリソースを共有しますが、このメソッドは親クラスのインスタンス属性しか継承できないため、すべての属性を継承するためにsayメソッドを見つけることはできません。および親クラスのメソッドを使用するには、プロトタイプのチェーンを変更する必要があるため、組み合わせ継承メソッドが導入されます。

3. 組み合わせの継承

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = new Person();
var man1 = new Man('joe');
var man2 = new Man('david');
console.log(man1.name === man2.name);//false
console.log(man1.say === man2.say);//true
man1.say(); //hello, my name is joe

man1 と man2 のインスタンス属性は実際にはプロトタイプ属性をオーバーライドしますが、プロトタイプの Say メソッドをオーバーライドしないことに注意してください (オーバーライドしないため)。したがって、ここでは man1.say === man2.say は true を返します。そのため、プロトタイプのプロパティはすべてのインスタンスに共通であるため、オーバーライドしないように十分注意する必要があります。

4. 寄生組み合わせ継承

正直に言うと、次の形式の名前はよくわかりませんが、確かに最も一般的で古典的な JavaScript 継承メソッドです。実際、プロトタイプ オブジェクトの構造を理解する必要があるだけです:

function Person (name, age) {
      this.name = name;
      this.age = age;
    }
Person.prototype.say = function(){
  console.log('hello, my name is ' + this.name);
};
function Man(name, age) {
  Person.apply(this, arguments);
}
Man.prototype = Object.create(Person.prototype);//a.
Man.prototype.constructor = Man;//b.
var man1 = new Man('pursue');
var man2 = new Man('joe');
console.log(man1.say == man2.say);
console.log(man1.name == man2.name);

実際、寄生組み合わせ継承と上記の組み合わせ継承の違いは、サブクラスのプロトタイプ オブジェクトの構築方法のみです ( a. と b.)、ここで使用されている Object.creat(obj) メソッドでは、次のような受信 obj オブジェクトの浅いコピーが作成されます。サブクラスは親クラスのプロトタイプ オブジェクトと比較されます。これは、サブクラスのプロトタイプを直接コピーする一般的な結合継承 (Man.prototype = new Person(); など) とは異なり、単なる接続です。プロパティの暴力的な上書き。寄生組み合わせ継承方法は、インスタンス属性とプロトタイプ属性を別々に継承するため、実装がより合理的です。

注: コード b. は、instanceof の結果を変更しませんが、コンストラクターが必要なシナリオではより厳密になります。

以上が継承を実装するために JavaScript を使用する必要があるのはなぜですか?いくつかの継承方法の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。