JavaScript This 的六道坎

叁歲伎倆 2022-07-12 10:22 140阅读 0赞

作者：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，继续理解“对于箭头函数，只要看它在哪里创建”这句话。

参考

1.  Mozilla Developer Network
2.  Kyle Simpson, this & object prototypes
3.  Axel Rauschmayer, Speaking JavaScript