Javascript_javascript スキルにおける call() メソッドの紹介

Mozilla の公式 Web サイトにある call() の紹介は次のとおりです:

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

call() メソッドは、指定された this 値と指定されたいくつかのパラメーター値を使用して関数またはメソッドを呼び出します。

Call() 構文

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

fun.call(thisArg[, arg1[, arg2[, ...]]])

Call() パラメータ

thisArg

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

fun 関数の実行時に指定される this の値。関数の実行時に、指定された this 値が必ずしも実際の this 値であるとは限らないことに注意してください。関数が非厳密モードの場合、null および未定義として指定された this 値は自動的にグローバル オブジェクトを指します (ブラウザの場合はウィンドウ オブジェクトです)、値がプリミティブ値 (数値、文字列、ブール値) である this は、プリミティブ値の自動ラッピング オブジェクトを指します。

arg1、arg2、...

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

指定されたパラメータのリスト。

JavaScript の call() メソッド

上記の複雑な説明に注意を払わず、段階的にプロセスを開始してください。

Call() メソッドのインスタンス

そこで、別の Hello, World を書きました:

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

関数 print(p1, p2) {
console.log( p1 ' ' p2);
}
print("こんにちは", "世界");
print.call(未定義, "Hello", "World");

どちらのメソッドも同じ出力を持ちますが、対照的に、call メソッドは未定義も渡します。

次に、別の例を見てみましょう。

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

var obj=function(){};
関数 print(p1, p2) {
console.log( p1 ' ' p2);
}

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

ここでのみ、渡すものはまだ未定義です。前の例で未定義なのは、パラメーターを渡す必要があるためです。これは実際には call の使用法を反映していません。もっと良い例を見てみましょう。

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

関数 print(name) {
console.log( this.p1 ' ' this.p2);
}

var h={p1:"hello", p2:"world", print:print};
h.print("fd");

var h2={p1:"こんにちは", p2:"世界"};
print.call(h2, "何も");

呼び出しとは、自分のメソッドやオブジェクトを呼び出すのと同じように、他の人のメソッドやオブジェクトを借りて呼び出すことを意味します。 h.print では、関数がメソッドとして呼び出されるとき、これは関連するオブジェクトを指します。この例では、h2 が print を呼び出したのか、print が h2 を呼び出したのかがわかりませんでした。そこで、Mozilla の例を引用しました

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

関数 製品(名前、価格) {
This.name = 名前;
This.price = 価格;

if (価格 throw RangeError('マイナス価格の製品「' name '」は作成できません');
これを返してください;
}

関数 Food(名前、価格) {
Product.call(this, 名前, 価格);
This.category = '食べ物';
}
Food.prototype = new Product();

var チーズ = new Food('feta', 5);
console.log(チーズ);

ここでは、どのオブジェクトがどのメソッドを呼び出したかを実際に確認できます。この例では、Food コンストラクターを使用して作成されたオブジェクト インスタンスには、Product コンストラクターに追加された name 属性とprice 属性がありますが、category 属性はそれぞれのコンストラクターで定義されます。

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

関数 print(name) {
console.log( this.p1 ' ' this.p2);
}

var h2= function(no){
This.p1 = "こんにちは";
This.p2 = "世界";
Print.call(this, "nothing");
};
h2();

ここでの

h2 は、関数 print を呼び出すレシーバーとして機能します。 Food の例と同様に、子コンストラクター内で、親コンストラクターの call メソッドを呼び出すことで継承を実装できます。

Callメソッドの利点については、「効果的なJavaScript」で紹介しています。

1. call メソッドを使用して、関数を呼び出すようにレシーバーをカスタマイズします。
2. call メソッドを使用して、指定されたオブジェクトに存在しないメソッドを呼び出します。
3. call メソッドを使用して、ユーザーがコールバック関数のレシーバーを指定できる高階関数を定義します。