JavaScript応用プログラミング読書メモ(14) js継承機構の実装

JavaScript応用プログラミング読書メモ(14) js継承機構の実装_javascriptスキル

WBOY

リリース： 2016-05-16 17:51:01

オリジナル

1092 人が閲覧しました

継承

継承はオブジェクト指向言語の重要な機能です。つまり、あるクラスが別のクラスのメソッドとプロパティを再利用できます。 JavaScript で継承を実装するには、オブジェクト偽装、call()、apply()、プロトタイプチェーン、ハイブリッドメソッドという 5 つの主な方法があります。

以下に紹介します。

オブジェクトの偽装

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

例:

コードをコピーコードは次のとおりです:

 
関数ClassA(sColor ){ 
this.color=sColor; 
this.sayColor=function(){ 
alert(this.color) 
} 

関数ClassB(sColor ,sName){ 
this.newMethod=ClassA; 
this.newMethod(sColor); 

this.name=sName; .sayName= function(){ 
alert(this.name); 
} 
} 

 
呼び出し: 

コードをコピーしますコードは次のとおりです。 var objb=new ClassB("blue","Test");

objb.sayColor(); ;//

 blueobjb.sayName(); // テスト

注: ここで ClassA への参照を削除する必要があります。削除しないと、後で定義される新しいメソッドと属性によって関連する属性が上書きされます。そしてスーパークラスのメソッド。このようにして多重継承を実現できます。

call() メソッド

オブジェクト偽装メソッドの人気により、第 3 版では 2 つの新しいメソッド call() と apply( が Function オブジェクトに追加されましたECMAScript ) メソッドを使用して同様の機能を実現します。
call() メソッドの最初のパラメータは this のオブジェクトとして使用され、他のパラメータは関数自体に直接渡されます。例:

コードをコピーコードは次のとおりです: function SayColor(sPrefix,sSuffix) {

alert(sPrefix this.color sSuffix);

var obj=new Object(); 

// 
sayColor.call(obj,"色は ","、とても良い色です。"); 

 このメソッドを使用します。継承を実装するには、最初の 3 行の割り当て、呼び出し、削除のコードを置き換えるだけです:

コードをコピー

コードは次のとおりです。次のように: function ClassB(sColor,sName){ //this.newMethod=ClassA; //this.newMethod(sColor); .newMethod;

ClassA.call(this,sColor);

this.sayName=function(){ 
alert(this.name); >} 
} 

apply() メソッド 
 
 apply() メソッドは call() メソッドと似ていますが、次の点が異なります。 2 番目のパラメータは apply( ) メソッド内にあり、配列が渡されます。

コードをコピー

コードは次のとおりです。

function SayColor(sPrefix,sSuffix){ alert (sPrefix this.color sSuffix); } var obj=new Object();

//出力色は赤です。確かにとてもいい色です。

sayColor.apply(obj,new Array("色は ","、とてもいい色です。"));このメソッドを継承するには、最初の 3 行の割り当て、呼び出し、削除のコードを置き換えるだけです: 

コードをコピー

 コードは次のとおりです。

function ClassB(sColor,sName){
//this.newMethod=ClassA;
//this.newMethod(sColor); 🎜>//delete this.newMethod;

ClassA.apply(this,new Array(sColor)); this.sayName=function(){ alert(this.name); } }

call() との違いの 1 つは、スーパークラスのパラメーターの順序がサブクラスのパラメーターの順序とまったく同じである場合、引数を 2 番目のパラメーターとして使用できることです。

プロトタイプチェーン

この形式の継承は、もともと ECMAScript のプロトタイプチェーンに使用されていました。 Prototype オブジェクトのプロパティとメソッドはすべて、そのクラスのすべてのインスタンスに渡されます。プロトタイプチェーンはこの機能を利用して継承メカニズムを実装します。

プロトタイプチェーンを使用して継承を実装する例:

コードをコピーコードは次のとおりです:

 
function ClassA(){ 
} 

ClassA.prototype.color="red"; 
ClassA.prototype.sayColor=function(){ 
alert(this .color); 
}; 

関数 ClassB(){ 
} 

ClassB.prototype=new ClassA(); ClassA のコンストラクターを呼び出します。パラメーターは渡されません。プロトタイプ チェーンでは、コンストラクターにパラメーターがないことを確認するのが標準的な方法です。 

ハイブリッドメソッド

このメソッドは、オブジェクト偽装とプロトタイプチェーンメソッドを組み合わせたものです。例:

コードをコピーコードは次のとおりです。 function ClassA(sColor){

this .color=sColor;

} 
ClassA.prototype.sayColor=function(){ 
alert(this.color) 
} 

function ClassB(sColor, sName){ 
ClassA.call(this,sColor); 
this.name=sName; 

ClassB.prototype=new ClassA(); SayName=function (){ 
alert(this.name); 
} 

 
呼び出し例: 

コードをコピー

コードは次のとおりです: var objb=new ClassB("red","test"); objb.sayColor();// 出力red objb.sayName();// 出力テスト

作者: Artwl