面试题：JavaScript箭头函数中this的特殊性

Question

假设有如下JavaScript代码： ```javascript const outer = { value: 1, getValue: function() { return () => { return this.value; }; } }; const innerFunc = outer.getValue(); console.log(innerFunc()); const newOuter = { value: 2 }; innerFunc.call(newOuter); console.log(innerFunc()); ``` 请说明两次`console.log(innerFunc())`输出的值分别是什么，并详细解释箭头函数中`this`的绑定规则以及上述代码执行过程中`this`指向的变化。

Answer 1

1. 两次console.log(innerFunc())输出的值：

   • 第一次console.log(innerFunc())输出1。
   • 第二次console.log(innerFunc())输出1。

2. 箭头函数中this的绑定规则：

   • 箭头函数没有自己的this，它的this在定义时继承自外层作用域（词法作用域）。也就是说，箭头函数的this指向定义它时所处的外层执行上下文的this，且不会被call、apply、bind等方法改变。

3. 上述代码执行过程中this指向的变化：

   • 首先，定义了对象outer，其getValue方法返回一个箭头函数。当const innerFunc = outer.getValue();执行时，箭头函数定义在outer.getValue函数内部，此时它的this继承自outer.getValue函数的this，而outer.getValue作为outer对象的方法调用，这里的this指向outer对象。所以箭头函数内部的this.value实际上指的是outer.value，值为1，因此第一次console.log(innerFunc())输出1。
   • 接着，定义了newOuter对象，并执行innerFunc.call(newOuter);。由于箭头函数的this绑定在定义时就确定了，不会被call方法改变，所以innerFunc内部的this依然指向定义它时的outer对象，而不是newOuter对象。因此第二次console.log(innerFunc())输出还是1。