在前文，非常詳細的介紹了JS里this的上下文對象及用法，知道了this是由其上下文決定的——它是全局的、在對象中、在構造函數或類中、或在 DOM 事件處理程序上，它是隱式引用的。但是，如果使用call、apply或bind方法，你可以明確確定this應該引用什么。

何時使用call、apply或bind？

何時使用call、apply或bind，取決于程序的上下文。bind當你想使用事件來訪問另一個類中的一個類的屬性時，它會特別有用。例如，如果你要編寫一個簡單的游戲，你可能會將用戶界面和 I/O 分離到一個類中，而將游戲邏輯和狀態分離到另一個類中。由于游戲邏輯需要訪問輸入，例如按鍵和單擊，你可能希望bind事件訪問游戲邏輯類的this值。

重要的部分是知道如何確定this所指的對象，你可以像前文JS里this的上下文對象及用法介紹的那樣，隱含地執行此操作，或者使用接下來將學習的三種方法顯式地執行此操作。

call和apply的相同之處

call和apply非常相似——它們調用具有指定this上下文和可選參數的函數。call和apply之間的唯一區別是，call需要一個接一個地傳遞參數，而apply將參數作為一個數組。

在此示例中，我們將創建一個對象，并創建一個引用this但沒有this上下文的函數。

const webkaka = {
  name: '卡卡網',
  domainName: 'webkaka.com',
}

function describe() {
  console.log(`${this.name} 的域名是 ${this.domainName}.`)
}

describe()

輸出

"undefined 的域名是 undefined"

由于describe并且webkaka沒有關聯，因此單獨調用describe只會打印 undefined，因為它正在尋找全局對象上的那些屬性。

但是，你可以使用call和apply調用函數webkaka的this上下文。

describe.call(webkaka)
// or:
describe.apply(webkaka)

輸出

"卡卡網 的域名是 webkaka.com"

當這些方法被應用，在describe和webkaka之間會有一個新的聯系，現在讓我們確認this到底是什么。

function printThis() {
  console.log(this)
}
printThis.call(webkaka)
// or:
printThis.apply(webkaka)

輸出

{name: "卡卡網", domainName: "webkaka.com"}

在這種情況下，this實際上成為作為參數傳遞的對象。

這是call和apply是如何相同的。

call和apply的微妙區別

除了能夠將this上下文作為第一個參數傳遞之外，還可以傳遞其他參數。

const webkaka = {
name: '卡卡網',
domainName: 'webkaka.com',
}
function printThis() {
console.log(this)
}
function longDescribe(title, year) {
console.log(`${this.name} 的域名是 ${this.domainName}, 它的標題是 ${title} , 它創建于 ${year} 年。` )
}
longDescribe.call(webkaka, '卡卡測速網', 2009);

你要傳遞的每個附加值，用call時，它們都作為一個附加參數發送。

輸出

卡卡網 的域名是 webkaka.com, 它的標題是 卡卡測速網 , 它創建于 2009 年。

如果你嘗試使用apply發送完全相同的參數，則會發生以下情況：

longDescribe.apply(webkaka, '卡卡測速網', 2009);

輸出

Uncaught TypeError: second argument to Function.prototype.apply must be an array

對于apply，你必須傳遞數組中的所有參數。

longDescribe.apply(webkaka, ['卡卡測速網', 2009]);

輸出

卡卡網 的域名是 webkaka.com, 它的標題是 卡卡測速網 , 它創建于 2009 年。

單獨傳遞參數或以數組形式傳遞參數之間的區別是微妙的，但要注意這一點很重要。使用起來apply可能更簡單方便，因為如果某些參數細節發生變化，它不需要更改函數調用。

this與bind方法

call和apply都是一次性使用的方法——如果你用this上下文調用方法，它會擁有它，但原始函數將保持不變。

有時，你可能需要在另一個對象的this上下文中反復使用一個方法，在這種情況下，你可以使用bind方法創建一個具有顯式綁定this的全新函數。

const webkaka = {
name: '卡卡網',
domainName: 'webkaka.com',
}
function describe() {
console.log(`${this.name} 的域名是 ${this.domainName}`)
}

const Summary = describe.bind(webkaka);
Summary();

輸出

卡卡網 的域名是 webkaka.com

在這個例子中，每次你調用 Summary ，它總是會返回綁定到它的this原始值。嘗試將新this上下文綁定到它會失敗，因此你始終可以相信綁定函數返回你期望的this值。

const webkaka = {
name: '卡卡網',
domainName: 'webkaka.com',
}
function describe() {
console.log(`${this.name} 的域名是 ${this.domainName}`)
}
const Summary = describe.bind(webkaka);

const webkaka2 = {
name: '卡卡網',
domainName: 'webkaka.com',
}

Summary.bind(webkaka2);
Summary();

輸出

卡卡網 的域名是 webkaka.com

盡管此示例嘗試Summary再次綁定，但它保留了第一次綁定時的原始this上下文。

總結

本文詳細介紹了JS里this與call() apply()和bind()的用法相同及區別，我們在使用時應該明白其中的含義，以免用錯方法而得不到期望的結果。

參考文章

• 【示例】詳解JS里this的上下文對象及用法

標簽: this  call方法  apply方法  bind方法