JavaScript の `call()`、`apply()`、および `bind()` メソッドの違いは何ですか?

JavaScript の call()、apply()、bind() メソッドの違いを理解する

JavaScript では、call() とapply() メソッドを使用すると、開発者は関数のコンテキスト (this) を指定し、引数を渡すことができます。どちらのメソッドも同様の目的を果たしますが、関数に引数を指定する方法が異なります。

bind() を使用する場合?

bind() メソッド自体が区別されます。元の関数のコンテキストを保持する新しい関数を作成できるようにすることで、call() および apply() から削除されます。これは、非同期コールバックまたはイベントを処理する場合に有益であることがわかります。

次のコード スニペットを考えてみましょう:

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

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

上記の例が示すように、bind() は、後で実行されると新しい関数を返します。 、元の関数のコンテキスト (this) を維持します。これにより、非同期コールバックとイベントでのコンテキストの保存が容易になります。

イベントと非同期コールバックでの使用

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.
};

この例では、bind() により、 onClick() メソッドは、イベントによってトリガーされると、イベント リスナーを開始した MyObject インスタンスのコンテキストを保持します。 binding() がないと、onClick() メソッドのコンテキストは期待どおりのインスタンスになりません。

bind() の実装

bind() の簡略化された解釈) メソッドは次のように実装できます:

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

この簡素化された実装では、次のような新しい関数が作成されます。提供されたコンテキスト (ctx) と引数を使用して元の関数を呼び出します。元の Function.prototype.bind() 実装はより複雑で、追加の引数を渡すなどの追加のシナリオを処理します。

以上がJavaScript の `call()`、`apply()`、および `bind()` メソッドの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。