首頁 > web前端 > js教程 > Javascript 的 `bind()`、`call()` 和 `apply()`:我什麼時候應該使用它們?

Javascript 的 `bind()`、`call()` 和 `apply()`:我什麼時候應該使用它們?

DDD
發布: 2024-12-02 01:37:10
原創
170 人瀏覽過

Javascript's `bind()`, `call()`, and `apply()`: When Should I Use Each?

Javascript 的 bind() 與 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
登入後複製

在所有三種情況下,輸出為 81,因為所有函數都會呼叫 obj 上下文中的 getX 函數。然而,bind() 版本傳回一個新函數,該函數在執行時將具有所需的上下文集。

以上是Javascript 的 `bind()`、`call()` 和 `apply()`:我什麼時候應該使用它們?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板