JavaScript における call と apply の使用法と違い

apply は 2 つのパラメーターを受け取ります。最初のパラメーターは、添え字を持つコレクションです。このコレクションは、要素を受け取ります。呼び出された関数にパラメーターとして渡されます:

var func = function( a, b, c ){
  alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
};
func.apply( null, [ 1, 2, 3 ] );

このコードでは、パラメーター 1、2、および 3 が配列に配置され、一緒に func 関数に渡されます。これらは、func パラメーター リストの a、b、およびに対応します。それぞれ c.

apply と同様に、最初のパラメータは関数本体の this ポインタを表し、2 番目のパラメータから順に各パラメータが関数に渡されます。

関数を呼び出すとき、JavaScript インタプリタは仮パラメータの数、型、順序の違いを考慮せず、実際のパラメータは内部的に配列で表されます。この意味で、apply は call よりも使用率が高くなります。関数に渡されるパラメーターの数を気にする必要はなく、apply を使用してすべてをプッシュするだけで済みます。 call は apply でラップされた糖衣構文であり、関数が受け入れるパラメーターの数が正確にわかっていて、仮パラメーターと実際のパラメーターの対応を一目で表したい場合は、 call を使用してパラメーターを転送することもできます。

call と apply の使用法

1. this ポインターを変更する

call と apply の最も一般的な使用法は、関数内で this ポインターを変更することです。例を見てみましょう: getName を実行するとき。 .call( obj1 ) このコードが記述されるとき、getName 関数本体の this は obj1 オブジェクトを指すため、ここでの

var func = function( a, b, c ){
  alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
};
func.call( null, 1, 2, 3 );

は実際には次と同等です:

var obj1 = {
  name: 'sven'
};
var obj2 = {
  name: 'anne'
};
window.name = 'window';
var getName = function(){
  alert ( this.name );
};
getName(); // 输出: window
getName.call( obj1 ); // 输出: sven
getName.call( obj2 ); // 输出: anne

実際の開発では、次のようなシナリオに遭遇することがよくあります。このポインタは誤って変更されます。たとえば、div ノードの onclick イベント内の this は元々この div を指していました:

var getName = function(){
alert ( this.name );
};

イベント関数に内部関数 func がある場合、 func 関数はイベント内で呼び出されます。func 関数の本体は、期待した div ではなく、ウィンドウを指します。次のコードを参照してください。

var getName = function(){
alert ( obj1.name ); // 输出: sven
};

2. Function.prototype.bind

document.getElementById( 'div1' ).onclick = function(){
  alert( this.id ); // 输出：div1
};

document.getElementById( 'div1' ).onclick = function(){
  alert( this.id ); // 输出：div1
  var func = function(){
    alert ( this.id ); // 输出：undefined
  }
  func();
};