The "this" in JavaScript depends on the way of the function's invocation, but WHY?

[xxleyi]

大多数学习 JS 的朋友，在对 this 进行一番学习之后，终于体认到一个事实：The "this" in JavaScript depends on the way of the function's invocation.

但是，估计很多朋友也仅仅只是知道 HOW 而不知道 WHY。不是吗？

你知道为什么吗？

这篇笔记意在指明这个 WHY，让所有的 HOW 成为一件显而易见的事情。

[xxleyi]

先让我们明确 how

总则：this 取决于一个函数被怎样调用（不考虑 strict 模式，感兴趣的可以自己查资料）。此外，箭头表达式函数中，this 遵守普通的词法作用域规则，也就是说：箭头表达式函数中的 this 取决于函数被定义的那个环境当中的 this

以下针对普通函数：

• 直接被调用，形如 func() 这种，无论出现在哪里，this 都是 global object

• 作为方法被调用，形如a.func() 这种，无论出现在哪里，this 取决于 a

• 通过 apply, call, bind 调用

  • apply: func.apply(a, [])
  • call: func.call(a, ...[])
  • newFunc = func.bind(a)
  • 以上三种情况下，取决于 a
  • undefined or null, this 为 global object
  • 其他基本类型，转为相应的对象类型
  • 对象类型，就是 a

• 通过 new 作为构造函数被调用，此时的 this 是全新生成的空对象

一篇绝佳的博客：Gentle Explanation of "this" in JavaScript

[xxleyi]

然后，让我们去探究背后的 why

为什么 JS 中的 this 被设计成这样？

或者说 JS 中的 this 是为了解决什么问题？

先从一个比 how 更基本的问题入手：this 究竟是什么？

• this 好像是一个关键字，因为 var this = 4 会导致语法错误
• 但从我们对 this 的使用上看，它就是一个变量，一个我们不可以声明，不可以重新赋值，但却能拿来读，能拿来 mutate 的变量，就像 const 声明的变量

所以，this 应该是一个变量，更准确地说，是一个标志符。

那么，关于标志符，关于变量，又能有什么更多的信息呢？

this 作为标志符，肯定会在某个时刻被赋值。那么，是谁在什么时候什么地方对 this 进行赋值的呢？

作为 what 的 this 先到此为止，继续思考 this 的用途：

• 和其他面向对象的语言类似，this 一大功能就是可以链接对象实例
• 和其他面向对象的语言不同，this 还可以链接对象，并且是隐式链接
• 然后为了方便进行明确的链接，引入了 apply call 和 bind 的方法
• 对的，在 JS 中，函数首先是作为对象而存在，其次因为可被调用，而发挥着函数的作用

JS 中函数是一个对象，有很多内置方法，比如 apply call bind 和 toString，然后，其内部会出现一个 this 变量，且 this 变量会根据函数对象被调用方式的不同而被赋予不同的值。

所以，背后隐约出现一个庞大的身影：是靠什么机制来决定 this 的值？

问到这里，靠自己的力量很可能找不到答案。

但，在某一天，我从其他地方获知了 JS 运行时，执行上下文，环境记录的存在和机制时，关于 this 的这些问题终于不再是问题。

是的，this 的背后是一个更大的东西，那个更大的东西值得每一位 JS 工程师掌握。

简而言之：JS 给函数对象的词法环境添加了几个独特的行为，其中包括 this，这几个独特行为构成 JS 面向对象机制解决方案的根基。