JS継承の詳しい説明

今回はJS継承について詳しく説明します。JS継承を使用する際の注意点は何ですか?実際の事例を見てみましょう。

ECMAScript は複数の方法で継承を実装します。これは、JavaScript の継承メカニズムが明示的に規定されておらず、模倣によって実装されているためです。これは、継承の詳細すべてがインタープリターによって完全に処理されるわけではないことを意味します。ニーズに応じて適切な継承方法を決定できます。

オブジェクトは

コンストラクターを偽装します。このキーワードを使用して、すべてのプロパティとメソッドに値を割り当てます(つまり、クラス宣言のコンストラクターメソッドを使用します)。コンストラクターは単なる関数であるため、ClassA コンストラクターを ClassB のメソッドにして呼び出すことができます。 ClassB は、ClassA のコンストラクターで定義されたプロパティとメソッドを受け取ります。

function ClassA(name) {    this.name = name;    this.sayName = function () {        console.log(this.name);
    };
}function ClassB(name,age) {    this.classA = ClassA;    this.classA(name);    delete this.classA;    this.age = age;    this.sayAge = function(){        console.log(this.age);
    }
}var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);
tom.sayName();                         //'Tom'jerry.sayName();                       //'Jerry'jerry.sayAge();                        //25console.log(tom instanceof ClassA);    //trueconsole.log(jerry instanceof ClassA);  //falseconsole.log(jerry instanceof ClassB);  //true

スーパークラスの関連するプロパティとメソッドが上書きされる可能性があるため、すべての新しいプロパティと新しいメソッドは、新しいメソッドのコード行を削除した後に定義する必要があります

オブジェクトの偽装は多重継承を実現できます
ClassA と ClassB が存在する場合、次に、ClassC は次のようにこれら 2 つのクラスを継承したいと考えています:

function ClassA(name){    this.name = name;    this.sayName = function (){        console.log(this.name);
    }
}function ClassB(age){    this.age = age;    this.sayAge = function(){        console.log(this.age);
    }
}function ClassC(name,age){    this.method = ClassA;    this.method(name);    
    this.method = ClassB;    this.method(age);    delete this.method;
}var tom = new ClassC('Tom',25);
tom.sayName();                       //'Tom';tom.sayAge();                        //25console.log(tom instanceof ClassA);  //falseconsole.log(tom instanceof ClassB);  //falseconsole.log(tom instanceof ClassC);  //true

この実装の欠陥は、2 つのクラス ClassA と ClassB に同じ名前のプロパティまたはメソッドがある場合、ClassB は後のクラスから継承するため、優先順位が高くなります。
この継承メソッドの人気により、ECMAScript の 3 番目のバージョンでは、Function オブジェクトに call() と apply() という 2 つのメソッドが追加されました。

呼び出しメソッドは、古典的なオブジェクト偽装メソッドに最も似ています。最初のパラメータは this のオブジェクトとして使用され、他のパラメータは関数自体に直接渡されます

function sayName(prefix) {    console.log(prefix + this.name);
};var tom = {};
tom.name = "Tom";
sayName.call(tom, 'This is ');  //'This is Tom'

関数sayNameはオブジェクトの外で定義されていますが、thisを参照することもできます。
call メソッドはオブジェクトの偽装を書き換えます

function ClassA(name){    this.name = name;    this.sayName = function(){        console.log(this.name);    }}function ClassB(name,age){    //this.method = ClassA;    //this.method(name);    //delete this.method;    ClassA.call(this,name);    this.age = age;    this.sayAge = function (){        console.log(this.age);    }}var tom = new ClassB('Tom',25);tom.sayName();                       //'Tom'tom.sayAge();                        //25console.log(tom instanceof ClassA);  //falseconsole.log(tom instanceof ClassB);  //true

call メソッドは、属性を使用して ClassA を参照する方法を置き換えます。

apply

apply メソッドには 2 つのパラメーターがあります。this として使用されるオブジェクトと、関数 array

function sayName(prefex,mark) {    console.log(prefex+ this.name+ mark);
};var tom = {};
tom.name = 'Tom';
sayName.apply(tom, ['This is ','!']);  //'This is Tom!'

に渡されるパラメーターです。apply を使用してオブジェクトを書き換えて、

function ClassA(name){    this.name = name;    this.sayName = function(){        console.log(this.name);    }}function ClassB(name,age){    ClassA.apply(this,arguments);    this.age = age;    this.sayAge = function (){        console.log(this.age);    }}var tom = new ClassB('Tom',25);tom.sayName();                       //'Tom'tom.sayAge();                        //25  console.log(tom instanceof ClassA);  //falseconsole.log(tom instanceof ClassB);  //true

Only のふりをすることもできます。スーパークラスとサブクラス内のパラメータの順序 パラメータ配列は、パラメータが完全に一致している場合にのみ渡すことができます

プロトタイプ チェーン

プロトタイプ オブジェクトは、このテンプレートに基づいてインスタンス化されます。たとえば、プロトタイプ オブジェクトの属性とメソッドは、このクラスのすべてのオブジェクトに渡されます。たとえば、プロトタイプ チェーンは、この関数を使用して継承メカニズムを実装します。

function ClassA() {}ClassA.prototype.name = 'Tom';ClassA.prototype.sayName = function () {    console.log(this.name);};function ClassB() {}ClassB.prototype = new ClassA();var tom = new ClassB();tom.sayName();                       //'Tom'console.log(tom instanceof ClassA);  //trueconsole.log(tom instanceof ClassB);  //true

ここでは、prototpye 属性を 1 つずつ割り当てることを避けるために、ClassB のプロトタイプ属性を ClassA のインスタンスとして設定します。
プロトタイプ チェーンではコンストラクターはパラメーターなしである必要があるため、ClassA を呼び出すときにパラメーターは設定されません。
プロトタイプ チェーンでは、instanceof の結果も変更され、ClassA と ClassB の両方に true が返されます。

プロトタイプ属性の再割り当てにより、サブクラス内の新しい属性はプロトタイプが割り当てられた後に出現する必要があります。

function ClassA() {}ClassA.prototype.name = 'Tom';ClassA.prototype.sayName = function () {    console.log(this.name);};function ClassB() {}ClassB.prototype = new ClassA();ClassB.prototype.age = 25;ClassB.prototype.sayAge = function () {    console.log(this.age);};var tom = new ClassA();var jerry = new ClassB();tom.sayName();                         //'Tom'jerry.sayName();                       //'Tom'jerry.name = 'Jerry';tom.sayName();                         //'Tom'jerry.sayName();                       //'Jerry'jerry.sayAge();                        //25console.log(tom instanceof ClassA);    //trueconsole.log(jerry instanceof ClassA);  //trueconsole.log(jerry instanceof ClassB);  //true

プロトタイプチェーンの欠点は、クラスのプロトタイプが書き換えられるため多重継承ができないことです。

混合メソッド

オブジェクトの偽装の問題は、コンストラクター メソッドを使用する必要があり、プロトタイプ チェーンを使用するとパラメーターを指定してコンストラクターを使用できないことです。ただし、この 2 つを組み合わせることはできます。
オブジェクトを使用してコンストラクターのプロパティを継承するふりをし、プロトタイプチェーンを使用してプロトタイプのメソッドを継承します。

function ClassA(name) {    this.name = name;
}
ClassA.prototype.sayName = function () {    console.log(this.name);
};function ClassB(name, age) {
    ClassA.call(this, name);    this.age = age;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayAge = function () {    console.log(this.age);
};var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);console.log(tom instanceof ClassA);                    //trueconsole.log(jerry instanceof ClassA);                  //trueconsole.log(jerry instanceof ClassB);                  //trueconsole.log(jerry.constructor === ClassA);             //trueconsole.log(ClassB.prototype.constructor === ClassA);  //true

ClassB のコンストラクターでは、ClassA の name 属性を継承するようにオブジェクトを使用し、ClassA のsayName メソッドを継承するためにプロトタイプチェーンを使用しています。プロトタイプチェーンの継承メソッドにより、instanceof は正常に実行されます。 。
しかし、コンストラクター属性には問題があります。各プロトタイプ オブジェクトにはそのコンストラクターを指すコンストラクター属性がありますが、ClassB インスタンスのコンストラクターは ClassA を指すため、継承チェーンで混乱が生じます。コンストラクターのポインターを手動で変更できます。

function ClassA(name) {    this.name = name;
}
ClassA.prototype.sayName = function () {    console.log(this.name);
};function ClassB(name, age) {
    ClassA.call(this, name);    this.age = age;
}
ClassB.prototype = new ClassA();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () {    console.log(this.age);
};var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);console.log(tom instanceof ClassA);                    //trueconsole.log(jerry instanceof ClassA);                  //trueconsole.log(jerry instanceof ClassB);                  //trueconsole.log(ClassA.constructor === ClassB);            //falseconsole.log(jerry.constructor === ClassA);             //falseconsole.log(ClassB.prototype.constructor === ClassA);  //false

プロトタイプチェーンを直接継承

メモリを節約するために、ClassAインスタンスを作成して、ClassBのプロトタイプがClassAのプロトタイプを直接指すようにすることはできません

function ClassA(name) {    this.name = name;
}
ClassA.prototype.sayName = function () {    console.log(this.name);
};function ClassB(name, age) {
    ClassA.call(this, name);    this.age = age;
}
ClassB.prototype = ClassA.prototype;
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () {    console.log(this.age);
};var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);console.log(ClassA.prototype.hasOwnProperty('sayAge'));  //trueconsole.log(ClassA.prototype.constructor === ClassB);   //true

このような不具合は、プロトタイプチェーンを直接変更することによるものですこれは ClassA にも影響するため、ClassA には SayAge メソッドがあり、ClassA のコンストラクター属性は ClassB であるように見えます。

仲介物としての空のオブジェクト

プロトタイプチェーンの直接継承の欠点を解決するために、空のオブジェクトを仲介物として使用できます。

function ClassA(name) {    this.name = name;
}
ClassA.prototype.sayName = function () {    console.log(this.name);
};function ClassB(name, age) {
    ClassA.call(this, name);    this.age = age;
}var fn = function(){};
fn.prototype = ClassA.prototype;
ClassB.prototype = new fn();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () {    console.log(this.age);
};console.log(ClassA.prototype.hasOwnProperty('sayAge'));  //falseconsole.log(ClassA.prototype.constructor === ClassB);    //false

オブジェクト インスタンスはまだ作成されていますが、空のオブジェクトはメモリをほとんど使用しないため、ClassB のプロトタイプを変更しても ClassA には影響しません。

extends メソッドへのカプセル化

function extends(child,parent){    var fn = function (){};
    fn.prototype = parent.prototype;
    child.prototype = new fn();
    child.prototype.constructor = child;
    child.super = parent.prototype;
}

JS の柔軟性により、原理と実装を理解することで、さまざまなシナリオで適切なメソッドを選択することができます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS コードを使用して弾幕エフェクトを作成する

H5 キャンバスを使用して弾幕エフェクトを作成する

以上がJS継承の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。