JavaScript_基礎知識をもとに継承機構を実装するcall()とapply()の呼び出し方法を詳しく解説-jsチュートリアル-php.cn

JavaScript_基礎知識をもとに継承機構を実装するcall()とapply()の呼び出し方法を詳しく解説

WBOY

リリース： 2016-05-16 17:34:21

オリジナル

889 人が閲覧しました

call() メソッド

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

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

function SayHello(sPrefix ,sSuffix) {
alert(this.name ”says” sPrefix sSuffix);
};

var obj = new Object();
obj.name = "トム";

sayHello.call(obj, "Hello ", "World.");

この例では、関数 SayHello() はオブジェクトに属していませんが、オブジェクトの外部で定義されています。任意のオブジェクトを引用符で囲むことができます。オブジェクト obj の name プロパティは青と等しくなります。 call() メソッドを呼び出すとき、最初のパラメータは obj で、sayHello() 関数の this キーワードの値を obj に割り当てる必要があることを示します。 2 番目と 3 番目のパラメータは文字列です。これらは、sayHello() 関数のパラメーター sPrefix および sSuffix と一致し、結果として「Tom Says Hello World.」というメッセージが表示されます。

このメソッドを継承メカニズムのオブジェクト偽装メソッドで使用するには、割り当て、呼び出し、および削除コードの最初の 3 行を単純に置き換えます:

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

function ClassA(sColor) {
this.color = sColor;
this.sayColor = function () {
アラート(this.color);
};
}

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//this.newMethod;
を削除ClassA.call(this, sColor);

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

ここでは、 ClassA のキーワード this を新しく作成した ClassB オブジェクトと等しくする必要があるため、これが最初のパラメータになります。 2 番目のパラメーター sColor は、両方のクラスの唯一のパラメーターです。

apply() メソッド

apply() メソッドは、this として使用されるオブジェクトと関数に渡されるパラメーターの配列という 2 つのパラメーターを受け取ります。例:

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

functionsayColor(sPrefix ,sSuffix) {
alert(sPrefix this.color sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("色は ", "とても素敵な色です。"));

この例は、先ほどの例と同じです。呼び出されるメソッドは apply() メソッドです。 apply() メソッドを呼び出すとき、最初のパラメータは依然として obj であり、sayColor() 関数の this キーワードの値を obj に割り当てる必要があることを示します。 2 番目のパラメーターは、sayColor() 関数のパラメーター sPrefix と sSuffix に一致する 2 つの文字列で構成される配列で、最終的に生成されるメッセージは「色は青です。本当に素晴らしい色です。」と表示されます。。

このメソッドは、新しいメソッドの割り当て、呼び出し、削除を行うためのコードの最初の 3 行を置き換えるのにも使用されます:

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

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod( color);
//this.newMethod;
ClassA.apply(this, new Array(sColor));

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

同じ、最初のパラメータは依然として this であり、2 番目のパラメータは 1 つの値 (color) だけを持つ配列です。 ClassB の引数オブジェクト全体を apply() メソッドに 2 番目のパラメーターとして渡すことができます。

コードをコピーしますコードは次のとおりです。以下のように:

function ClassB(sColor, sName) {
//this.newMethod = ClassA;
//this.newMethod(color);
//delete this.newMethod;
ClassA.apply(this, arguments);

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

Of course, A parameter object can be passed only if the order of parameters in the superclass is exactly the same as in the subclass. If not, you'll have to create a separate array with the parameters in the correct order. Additionally, the call() method can be used.

We can see that these two methods can very well replace the original object impersonation, making the writing slightly simpler. However, the disadvantage of these methods is that subclasses cannot inherit the methods or attributes declared by the parent class on the prototype chain. To address this issue, the next article will introduce another way to implement inheritance in JavaScript—prototype chain inheritance.