JavaScript This 的六道坎

鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

首先

  this is all about context.

this说白了就是找大佬,找拥有当前上下文(context)的对象(context object)。

大佬可以分为六层,层数越高权力越大,this只会认最大的。

第一层:世界尽头

权力最小的大佬是作为备胎的存在,在普通情况下就是全局,浏览器里就是window;在use strict的情况下就是undefined。

1 function showThis () {
2   console.log(this)
3 }
4 function showStrictThis () {
5   'use strict'
6   console.log(this)
7 }
8 showThis() // window
9 showStrictThis() // undefined

 

 第二层:点石成金

第二层大佬说白了就是找这个函数前面的点.。

如果用到this的那个函数是属于某个 context object 的,那么这个 context object 绑定到this。

比如下面的例子,boss是returnThis的 context object ,或者说returnThis属于boss。

 

1 var boss = {
2   name: 'boss',
3   returnThis () {
4     return this
5   }
6 }
7 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怎么做呢?

 1 var boss1 = {
 2   name: 'boss1',
 3   returnThis () {
 4     return this
 5   }
 6 }
 7 var boss2 = {
 8   name: 'boss2',
 9   returnThis: boss1.returnThis
10 }
11 boss2.returnThis() //boss2

没错,只要让使用this的函数是属于boss2就行。

 

第三层:指腹为婚

 

第三层大佬是Object.prototype.call和Object.prototype.apply,它们可以通过参数指定this。(注意this是不可以直接赋值的哦,this = 2会报ReferenceError。)

1 function returnThis () {
2   return this
3 }
4 var boss1 = { name: 'boss1' }
5 returnThis() // window
6 returnThis.call(boss1) // boss1
7 returnThis.apply(boss1) // boss1

第四层:海誓山盟

第四层大佬是Object.prototype.bind,他不但通过一个新函数来提供永久的绑定,还会覆盖第三层大佬的命令。
1 function returnThis () {
2   return this
3 }
4 var boss1 = { name: 'boss1'}
5 var boss1returnThis = returnThis.bind(boss1)
6 boss1returnThis() // boss1
7 var boss2 = { name: 'boss2' }
8 boss1returnThis.call(boss2) // still boss1

第五层:内有乾坤

一个比较容易忽略的会绑定this的地方就是new。当我们new一个函数时,就会自动把this绑定在新对象上,然后再调用这个函数。它会覆盖bind的绑定。

 1 function showThis () {
 2   console.log(this)
 3 }
 4 showThis() // window
 5 new showThis() // showThis
 6 var boss1 = { name: 'boss1' }
 7 showThis.call(boss1) // boss1
 8 new showThis.call(boss1) // TypeError
 9 var boss1showThis = showThis.bind(boss1)
10 boss1showThis() // boss1
11 new boss1showThis() // showThis

 

第六层:军令如山

最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的this不再妖艳,被永远封印到当前词法作用域之中,称作 Lexical this ,在代码运行前就可以确定。没有其他大佬可以覆盖。

这样的好处就是方便让回调函数的this使用当前的作用域,不怕引起混淆。

所以对于箭头函数,只要看它在哪里创建的就行。

如果对 V8 实现的词法作用域感兴趣可以看看这里。

 1 function callback (cb) {
 2   cb()
 3 }
 4 callback(() => { console.log(this) }) // window
 5 var boss1 = {
 6   name: 'boss1',
 7   callback: callback,
 8   callback2 () {
 9     callback(() => { console.log(this) })
10   }
11 }
12 boss1.callback(() => { console.log(this) }) // still window
13 boss1.callback2(() => { console.log(this) }) // boss1

下面这种奇葩的使用方式就需要注意:

 1 var returnThis = () => this
 2 returnThis() // window
 3 new returnThis() // TypeError
 4 var boss1 = {
 5   name: 'boss1',
 6   returnThis () {
 7     var func = () => this
 8     return func()
 9   }
10 }
11 returnThis.call(boss1) // still window
12 var boss1returnThis = returnThis.bind(boss1)
13 boss1returnThis() // still window
14 boss1.returnThis() // boss1
15 var boss2 = {
16   name: 'boss2',
17   returnThis: boss1.returnThis
18 }
19 boss2.returnThis() // boss2

如果你不知道最后为什么会是 boss2,继续理解“对于箭头函数,只要看它在哪里创建”这句话。

 

参考

 

  1. Mozilla Developer Network

  2. Kyle Simpson, this & object prototypes

  3. Axel Rauschmayer, Speaking JavaScript

 

posted @ 2017-02-25 09:31  WXUECHAO  阅读(193)  评论(0编辑  收藏  举报