JavaScript This 的六道坎
鑒于 this 風騷的運作方式，對 this 的理解是永不過時的話題，本文試圖通過將其大卸六塊來釘住這個磨人的妖精。
首先
this is all about context.
this 說白了就是找大佬，找擁有當前上下文（context）的對象（context object）。
大佬可以分為六層，層數越高權力越大， this 只會認最大的。
第一層：世界盡頭
權力最小的大佬是作為備胎的存在，在普通情況下就是全局，瀏覽器里就是 window ；在 use strict 的情況下就是 undefined 。
function showThis () {
console.log(this)
}
function showStrictThis () {
'use strict'
console.log(this)
}
showThis() // window
showStrictThis() // undefined
第二層：點石成金
第二層大佬說白了就是找這個函數前面的點 . 。
如果用到 this 的那個函數是屬于某個 context object 的，那么這個 context object 綁定到 this 。
比如下面的例子， boss 是 returnThis 的 context object ，或者說 returnThis 屬于 boss 。
var boss = {
name: 'boss',
returnThis () {
return this
}
}
boss.returnThis() === boss // true
下面這個例子就要小心點咯，能想出答案么？
var boss1 = {
name: 'boss1',
returnThis () {
return this
}
}
var boss2 = {
name: 'boss2',
returnThis () {
return boss1.returnThis()
}
}
var boss3 = {
name: 'boss3',
returnThis () {
var returnThis = boss1.returnThis
return returnThis()
}
}
boss1.returnThis() // boss1
boss2.returnThis() // ?
boss3.returnThis() // ?
答案是 boss1 和 window 哦，猜對了嗎。
只要看使用 this 的那個函數。
在 boss2.returnThis 里，使用 this 的函數是 boss1.returnThis ，所以 this 綁定到 boss1 ；
在 boss3.returnThis 里，使用 this 的函數是 returnThis ，所以 this 綁定到備胎。
要想把 this 綁定到 boss2 怎么做呢？
var boss1 = {
name: 'boss1',
returnThis () {
return this
}
}
var boss2 = {
name: 'boss2',
returnThis: boss1.returnThis
}
boss2.returnThis() //boss2
沒錯，只要讓使用 this 的函數是屬于 boss2 就行。
第三層：指腹為婚
第三層大佬是 Object.prototype.call 和 Object.prototype.apply ，它們可以通過參數指定 this 。（注意 this 是不可以直接賦值的哦， this = 2 會報 ReferenceError 。）
function returnThis () {
return this
}
var boss1 = { name: 'boss1' }
returnThis() // window
returnThis.call(boss1) // boss1
returnThis.apply(boss1) // boss1
第四層：海誓山盟
第四層大佬是 Object.prototype.bind ，他不但通過一個新函數來提供永久的綁定，還會覆蓋第三層大佬的命令。
function returnThis () {
return this
}
var boss1 = { name: 'boss1'}
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // boss1
var boss2 = { name: 'boss2' }
boss1returnThis.call(boss2) // still boss1
第五層：內有乾坤
一個比較容易忽略的會綁定 this 的地方就是 new 。當我們 new 一個函數時，就會自動把 this 綁定在新對象上，然后再調用這個函數。它會覆蓋 bind 的綁定。
function showThis () {
console.log(this)
}
showThis() // window
new showThis() // showThis
var boss1 = { name: 'boss1' }
showThis.call(boss1) // boss1
new showThis.call(boss1) // TypeError
var boss1showThis = showThis.bind(boss1)
boss1showThis() // boss1
new boss1showThis() // showThis
第六層：軍令如山
最后一個法力無邊的大佬就是 ES2015 的箭頭函數。箭頭函數里的 this 不再妖艷，被永遠封印到當前詞法作用域之中，稱作 Lexical this ，在代碼運行前就可以確定。沒有其他大佬可以覆蓋。
這樣的好處就是方便讓回調函數的 this 使用當前的作用域，不怕引起混淆。
所以對于箭頭函數，只要看它在哪里創建的就行。
如果對 V8 實現的詞法作用域感興趣可以看看 這里 。
function callback (cb) {
cb()
}
callback(() => { console.log(this) }) // window
var boss1 = {
name: 'boss1',
callback: callback,
callback2 () {
callback(() => { console.log(this) })
}
}
boss1.callback(() => { console.log(this) }) // still window
boss1.callback2(() => { console.log(this) }) // boss1
下面這種奇葩的使用方式就需要注意：
var returnThis = () => this
returnThis() // window
new returnThis() // TypeError
var boss1 = {
name: 'boss1',
returnThis () {
var func = () => this
return func()
}
}
returnThis.call(boss1) // still window
var boss1returnThis = returnThis.bind(boss1)
boss1returnThis() // still window
boss1.returnThis() // boss1
var boss2 = {
name: 'boss2',
returnThis: boss1.returnThis
}
boss2.returnThis() // boss2
如果你不知道最后為什么會是 boss2，繼續理解“對于箭頭函數，只要看它在哪里創建”這句話。
參考
- Mozilla Developer Network
- Kyle Simpson, this & object prototypes
- Axel Rauschmayer, Speaking JavaScript
來自：http://www.linuxeden.com/html/news/20170209/167944.html