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

ほとんどの先進的なブラウザは、関数内で this ポインターを指定するために使用される組み込みの Function.prototype.bind を実装しています。 Function.prototype.bind のネイティブ実装はありませんが、コードをシミュレートするのは難しくありません。

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

Function.prototype.bind を通じて func 関数を「パッケージ化」し、渡します。パラメータとしてのオブジェクト コンテキスト。このコンテキスト オブジェクトは、変更するオブジェクトです。

Function.prototype.bind の内部実装では、まず func 関数への参照を保存してから、新しい関数を返します。今後 func 関数を実行すると、返されたばかりの新しい関数が実際に最初に実行されます。新しい関数内のコード self.apply(context, argument) は、元の func 関数を実行し、func 関数の本体でコンテキスト オブジェクトを this として指定します。

これは Function.prototype.bind 実装の簡略化されたバージョンです。通常はもう少し複雑に実装しますが、

func 関数にいくつかのパラメーターを事前に入力できます:

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

上記は内容です。この記事の内容 すべての内容、この記事の内容が皆さんの勉強や仕事に少しでも役立つことを願っています。また、PHP 中国語 Web サイトをサポートしたいと思っています。

JavaScript での call と apply の使用法と違いに関するその他の記事については、PHP 中国語 Web サイトに注目してください。