JavaScript_jquery の apply 関数と call 関数の詳細な説明

初めて技術記事を翻訳したのですが、とても面白かったです!

原文の翻訳:

JavaScript の Function.apply と Function.call

最初の段落が省略されています。

各 JavaScript 関数には、toString()、call()、apply() などの多くのメソッドが付属しています。関数に独自のメソッドがあるというのは奇妙に聞こえるかもしれませんが、JavaScript のすべての関数はオブジェクトであることを覚えておいてください。 JavaScript の機能を確認 (復習) するには、この記事を参照してください。 JavaScript の関数とメソッドの違いも知りたいかもしれません。 「関数」や「メソッド」の記述はJavaScriptの規約に過ぎないと思います。関数は独立しています (例:alert())。メソッドは関数内のオブジェクトのプロパティ (ディクショナリ) であり、オブジェクトを通じてメソッドを呼び出します。各 JavaScript オブジェクトには toString() メソッドがあります。以下は、関数オブジェクトで toString() メソッドを使用できるコードの例です。

function foo(){
 alert('x');
}
alert(foo.toString());

関数はオブジェクトであるため、独自のプロパティとメソッドを持っています。それらはデータとして考えることができます。この記事では、apply() と call() の 2 つの関数メソッドのみに焦点を当てます。

次のコードから始めます:

var x = 10;
function f(){
 alert(this.x);
}
f();

グローバル関数 f() を定義します。 f() は this キーワードを通じて変数 x にアクセスしますが、オブジェクトのインスタンスを通じてこの関数を呼び出すことはできないことに注意してください。これはどのオブジェクトを指しているのでしょうか?これは、このグローバル オブジェクトを指します。変数 x は、このグローバル オブジェクトで定義されます。上記のコードは正常に実行でき、結果としてダイアログ ボックスに 10 が表示されます。

これを通じて call() と apply() を呼び出すことができます。次の例は、call() の使用方法を示しています。

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

最初に f() を呼び出すと、この時点ではグローバル オブジェクトを指しているため、ダイアログ ボックス 10 が表示されます。次に、f 関数の call() メソッドを呼び出します。入力パラメータは o で、実行結果には o の x 属性の値 15 が表示されます。 call() メソッドは、最初のパラメータを f 関数の this ポインタとして使用します。言い換えれば、 f 関数の this がどのオブジェクトを指しているのかをランタイムに伝えます。

このジャンプは、C、Java、および C# のプログラマにとっては、少しおかしく、少し異常に聞こえるかもしれません。これらは ECMAScript の楽しい部分です。

call() を通じて関数にパラメータを渡すこともできます:

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

apply() は call() に似ていますが、apply() では 2 番目のパラメーターが配列である必要がある点が異なります。この配列はパラメータとしてターゲット関数に渡されます。

var x = 10;
var o = {x : 15};
function f(message) {
 alert(message);
 alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);

apply() メソッドは、ターゲット メソッドのパラメータを気にせずに関数を作成できるため便利です。この関数は、apply() の 2 番目の配列パラメータを通じて追加のパラメータをメソッドに渡すことができます。

var o = {x : 15};
function f1(message1) {
 alert(message1 + this.x);
}
function f2(message1, message2) {
 alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
 func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);

この構文には何か問題があります。 apply() メソッドを呼び出すために、ターゲット関数に配列内のパラメーターを使用するように強制します。幸いなことに、この構文を簡素化する方法があります。その前に、パラメータ識別子を導入する必要があります。

JavaScript では、実際には各関数に可変長のパラメーター リストがあります。これは、関数にパラメータが 1 つしかない場合でも、関数に 5 つのパラメータを渡すことができることを意味します。次のコードにはエラーはなく、結果は「H」になります。

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

f() で、他のパラメータを受け入れたくない場合は、キーワード引数を使用できます。 argument はパラメータ オブジェクトを表し、配列と同様に長さを表す属性を持ちます。

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

厳密に言えば、引数は配列ではないことを知っておく必要があります。引数には length 属性がありますが、split、push、pop メソッドはありません。前の g() 関数では、必要なパラメータを引数からコピーして配列を形成し、この配列を apply() に渡すことができます。

var o = {x : 15};
function f(message1, message2) {
 alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
 // arguments[0] = object
 // arguments[1] = func
 var args = [];
 for(var i = 2; i < arguments.length; i++) {
  args.push(arguments[i]);
 }
 func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');

g() を呼び出すとき、引数を配列に詰め込む代わりに、追加の引数をパラメータとして渡すことができます。