JavaScript の「bind()」、「call()」、および「apply()」: それぞれをいつ使用する必要がありますか?

JavaScript の binding() と call() および apply(): それぞれをいつ使用するか?

call() と apply()どちらも特定のコンテキスト内で関数を呼び出すために使用されます (関数内で this キーワードを設定することで)。主な違いは引数が関数に渡される方法にあります。 call() は引数がカンマ区切りリストで渡されることを期待しますが、apply() は引数の配列を必要とします。

bind() メソッドの使用

とは異なりますcall() と apply()、bind() は関数をすぐには呼び出しません。代わりに、後で呼び出されたときに、元の関数を呼び出すための正しいコンテキストが設定された新しいバインドされた関数を返します。これは、非同期コールバックまたはイベントでコンテキストを維持したい場合に特に便利です。

たとえば、次のコードを考えてみましょう。

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

onClick ハンドラーでは、 this キーワードが使用されます。イベントがトリガーされている場合でも、イベント リスナーを作成した MyObject インスタンスを参照します。

Call/Apply と Bind を使用する場合

関数をすぐに呼び出してそのコンテキストを変更する必要がある場合は、call() または apply() を使用します。対照的に、イベントなど、特定のコンテキストで関数を後で呼び出せるようにする場合は、bind() を使用します。

簡単な図を次に示します。

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)()); // 81
alert(obj.getX.call(obj));   // 81
alert(obj.getX.apply(obj));  // 81

3 つのシナリオすべてにおいての場合、すべての関数が obj コンテキスト内で getX 関数を呼び出すため、出力は 81 になります。ただし、bind() バージョンは、実行時に必要なコンテキストが設定された新しい関数を返します。

以上がJavaScript の「bind()」、「call()」、および「apply()」: それぞれをいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。