鑒于 this 風(fēng)騷的運(yùn)作方式，對(duì) this 的理解是永不過時(shí)的話題，本文試圖通過將其大卸六塊來釘住這個(gè)磨人的妖精。

首先

this is all about context.

this 說白了就是找大佬，找擁有當(dāng)前上下文（context）的對(duì)象（context object）。

大佬可以分為六層，層數(shù)越高權(quán)力越大， this 只會(huì)認(rèn)最大的。

第一層：世界盡頭

權(quán)力最小的大佬是作為備胎的存在，在普通情況下就是全局，瀏覽器里就是 window ；在 use strict 的情況下就是 undefined 。

function showThis () {console.log(this)} function showStrictThis () {’use strict’console.log(this)} showThis() // windowshowStrictThis() // undefined 第二層：點(diǎn)石成金

第二層大佬說白了就是找這個(gè)函數(shù)前面的點(diǎn) . 。

如果用到 this 的那個(gè)函數(shù)是屬于某個(gè) context object 的，那么這個(gè) context object 綁定到 this 。

比如下面的例子， boss 是 returnThis 的 context object ，或者說 returnThis 屬于 boss 。

var boss = {name: ’boss’,returnThis () {return this}} boss.returnThis() === boss // true

下面這個(gè)例子就要小心點(diǎn)咯，能想出答案么？

var boss1 = {name: ’boss1’,returnThis () {return this}} var boss2 = {name: ’boss2’,returnThis () {return boss1.returnThis()}} var boss3 = {name: ’boss3’,returnThis () {var returnThis = boss1.returnThisreturn returnThis()}} boss1.returnThis() // boss1boss2.returnThis() // ?boss3.returnThis() // ?

答案是 boss1 和 window 哦，猜對(duì)了嗎。

只要看使用 this 的那個(gè)函數(shù)。

在 boss2.returnThis 里，使用 this 的函數(shù)是 boss1.returnThis ，所以 this 綁定到 boss1 ；

在 boss3.returnThis 里，使用 this 的函數(shù)是 returnThis ，所以 this 綁定到備胎。

要想把 this 綁定到 boss2 怎么做呢？

var boss1 = {name: ’boss1’,returnThis () {return this}} var boss2 = {name: ’boss2’,returnThis: boss1.returnThis} boss2.returnThis() //boss2

沒錯(cuò)，只要讓使用 this 的函數(shù)是屬于 boss2 就行。

第三層：指腹為婚

第三層大佬是 Object.prototype.call 和 Object.prototype.apply ，它們可以通過參數(shù)指定 this 。（注意 this 是不可以直接賦值的哦， this = 2 會(huì)報(bào) ReferenceError 。）

function returnThis () {return this} var boss1 = { name: ’boss1’ } returnThis() // windowreturnThis.call(boss1) // boss1returnThis.apply(boss1) // boss1 第四層：海誓山盟

第四層大佬是 Object.prototype.bind ，他不但通過一個(gè)新函數(shù)來提供永久的綁定，還會(huì)覆蓋第三層大佬的命令。

function returnThis () {return this} var boss1 = { name: ’boss1’} var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // boss1 var boss2 = { name: ’boss2’ }boss1returnThis.call(boss2) // still boss1 第五層：內(nèi)有乾坤

一個(gè)比較容易忽略的會(huì)綁定 this 的地方就是 new 。當(dāng)我們 new 一個(gè)函數(shù)時(shí)，就會(huì)自動(dòng)把 this 綁定在新對(duì)象上，然后再調(diào)用這個(gè)函數(shù)。它會(huì)覆蓋 bind 的綁定。

function showThis () {console.log(this)} showThis() // windownew showThis() // showThis var boss1 = { name: ’boss1’ }showThis.call(boss1) // boss1new showThis.call(boss1) // TypeError var boss1showThis = showThis.bind(boss1)boss1showThis() // boss1new boss1showThis() // showThis 第六層：軍令如山

最后一個(gè)法力無邊的大佬就是 ES2015 的箭頭函數(shù)。箭頭函數(shù)里的 this 不再妖艷，被永遠(yuǎn)封印到當(dāng)前詞法作用域之中，稱作 Lexical this ，在代碼運(yùn)行前就可以確定。沒有其他大佬可以覆蓋。

這樣的好處就是方便讓回調(diào)函數(shù)的 this 使用當(dāng)前的作用域，不怕引起混淆。

所以對(duì)于箭頭函數(shù)，只要看它在哪里創(chuàng)建的就行。

如果對(duì) V8 實(shí)現(xiàn)的詞法作用域感興趣可以看看 這里 。

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 windowboss1.callback2(() => { console.log(this) }) // boss1

下面這種奇葩的使用方式就需要注意：

var returnThis = () => this returnThis() // windownew returnThis() // TypeError var boss1 = {name: ’boss1’,returnThis () {var func = () => thisreturn 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

如果你不知道最后為什么會(huì)是 boss2，繼續(xù)理解“對(duì)于箭頭函數(shù)，只要看它在哪里創(chuàng)建”這句話。

參考 Mozilla Developer Network Kyle Simpson, this & object prototypes Axel Rauschmayer, Speaking JavaScript

來自：http://www.linuxeden.com/html/news/20170209/167944.html