鑑於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，繼續理解「對於箭頭函數，只要看它在哪裡創建」這句話。
以上就是JavaScript This 的六道坎的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
