原文首發(fā)于 baishusama.github.io，歡迎圍觀～
概述
本文主要講述了幾種場景下 setTimeout 的回調(diào)函數(shù)的 this 綁定出錯的幾種解決方法。
舉個栗子
class Person {
sayName() {
console.log("Hello, I'm " + this.name + ".")
}
constructor(name = "No One") {
this.name = name
setTimeout(this.sayName, 1000)
}
}
var imo = new Person("Imo")
setTimeout(imo.sayName, 2000)
P.S. 上述代碼使用了 ES6 語法，這里不做語法上的過多解釋。不知所謂的童鞋可以看一下《30 分鐘掌握 ES6 核心內(nèi)容（上）》、《30 分鐘掌握 ES6 核心內(nèi)容（下）》這兩篇。
上述代碼定義了一個 Person 類，這個類有一個構(gòu)造函數(shù)和一個 sayName 方法。其中，sayName 方法內(nèi)部使用了 this 關(guān)鍵字，用于引用當前實例的（公有成員）變量 name。
上述代碼中，有兩個 setTimeout 函數(shù)。第一個 setTimeout 存在于 Person 類的構(gòu)造函數(shù)當中，其第一個參數(shù)是 this.sayName；第二個存在于全局作用域中，其第一個參數(shù)是 imo.sayName。兩者都期望在控制臺打印 Hello, I'm Imo.，但是目前兩者都沒有達到期望——目前打印的均是 Hello, I'm .。出現(xiàn)這種現(xiàn)象的原因是 sayName 方法內(nèi)部的 this 沒有如期地指向 imo 對象，而是錯誤地指向了全局對象，因而 this.name 的值為 undefined，對應到字符串是 '' （空字符串）。
那么，我們?nèi)绾涡薷拇a使得 this 關(guān)鍵字如期地指向 imo 對象呢？
第二個 setTimeout
先解決比較簡單的第二個 setTimeout 。
有兩種方法：
.bind()- 匿名函數(shù)包裹
代碼如下：
// 第二個 setTimeout 用“.bind()”方法修改如下：
setTimeout(imo.sayName.bind(imo), 2000)
// 第二個 setTimeout 用“匿名函數(shù)包裹”方法修改如下：
setTimeout(function(){
imo.sayName()
}, 2000)
“.bind()”方法
Apply 調(diào)用模式 - The Apply Invocation Pattern
Function.prototype.bind() @MDN：“bind() 方法會創(chuàng)建一個新函數(shù)。當這個新函數(shù)被調(diào)用時，bind() 的第一個參數(shù)將作為它運行時的 this ...”
“匿名函數(shù)包裹”方法
方法調(diào)用模式 - The Method Invocation Pattern
在外層匿名函數(shù)的內(nèi)部，sayName 作為 imo 對象的方法被調(diào)用，方法內(nèi)部的 this 也就被綁定到 imo 對象了。
第一個 setTimeout
我們嘗試上面提到的兩種解決方法。
“.bind()”方法
.bind() 方法依舊可行，代碼：
// 第一個 setTimeout 用“.bind()”方法修改如下：
setTimeout(this.sayName.bind(this), 1000)
“匿名函數(shù)包裹”方法
“匿名函數(shù)包裹”方法好像讓事情更復雜了——修改后但沒能解決問題的代碼如下：
// 第二個 setTimeout 用“匿名函數(shù)包裹”方法修改如下：
setTimeout(function(){
this.sayName()
}, 1000)
此時，this.sayName 的值為 undefined，sayName 方法甚至都沒有機會得到調(diào)用。
“匿名函數(shù)包裹+.bind”
在包裹匿名函數(shù)后的代碼的基礎(chǔ)上，仍可以使用 .bind 方法。
// 第二個 setTimeout 用“匿名函數(shù)包裹+.bind”方法修改如下：
setTimeout(function(){
this.sayName()
}.bind(this), 1000)
“匿名函數(shù)包裹+that”
可以利用匿名函數(shù)形成閉包，引用正確的 this：
// 第二個 setTimeout 用“匿名函數(shù)包裹+that”方法修改如下：
var that = this
setTimeout(function(){
that.sayName()
}, 1000)
“箭頭函數(shù)”方法
ES6 的箭頭函數(shù)沒有自己的 this 、直接繼承外部作用域的 this ，所以還可以這么改：
// 第二個 setTimeout 用“箭頭函數(shù)”方法修改如下：
setTimeout(()=>{this.sayName()}, 1000)
小結(jié)
當 setTimeout 的回調(diào)函數(shù)中出現(xiàn) this 的時候，要特別注意其綁定的對象是否和預想的一致。當綁定有誤時可以通過下述方法解決。
當 setTimeout 的回調(diào)函數(shù)是一個能夠通過變量引用的對象的方法（類似于例子中的 imo.sayName）時，有兩種解決方法：
- “
.bind()”方法 - “匿名函數(shù)包裹”方法
當 setTimeout 的回調(diào)函數(shù)是一個通過 this 訪問的方法（類似于例子中的 this.sayName）時，有兩種解決方法：
- “
.bind()”方法 - “ES6箭頭函數(shù)”方法
當 setTimeout 的回調(diào)函數(shù)是一個含有 this 的匿名函數(shù)（類似于例子中的 this.sayName 被匿名函數(shù)包裹后）時，有兩種解決方法：
- “
.bind()”方法 - “閉包that”方法
可以看出，解決方法中的“
.bind()”方法是萬金油。所以，如果你記不住這么多方法，至少也要記住“.bind()”方法。
