（点击上方公众号 ，可快速关注）
作者：crimx
blog.crimx.com/2016/05/12/understanding-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
看完本文有收获？请转发分享给更多人
关注「前端大全」，提升前端技能
