面试题：JavaScript 箭头函数对 this 绑定及函数提升的复杂影响

Question

在一个包含多层嵌套函数（其中既有普通函数又有箭头函数）的 JavaScript 代码块中，分析 this 的指向情况，并说明箭头函数如何影响整个作用域链及函数提升机制。假设如下代码结构：function outerFunction() { let a = 1; function innerFunction() { let b = 2; const arrowFunction = () => { console.log(this, a, b); }; arrowFunction(); } innerFunction(); } outerFunction(); 请详细解释输出结果及原因。

Answer 1

1. this 指向分析：
   • 在 JavaScript 中，普通函数的 this 指向取决于函数的调用方式。在非严格模式下，如果函数作为对象的方法调用，this 指向该对象；如果函数独立调用，this 指向全局对象（在浏览器中是 window，在 Node.js 中是 global）。在严格模式下，独立调用的函数 this 指向 undefined。
   • 对于箭头函数，它没有自己的 this 绑定。它的 this 指向取决于外层作用域（词法作用域）中的 this。
   • 在给定代码中：
     • outerFunction 和 innerFunction 都是普通函数。当 outerFunction 被调用时，由于它不是作为某个对象的方法调用（独立调用），在非严格模式下，this 指向全局对象（假设在浏览器环境下是 window）。
     • innerFunction 同样是独立调用（在 outerFunction 内部调用），在非严格模式下，this 也指向全局对象 window。
     • arrowFunction 是箭头函数，它的 this 指向外层作用域的 this，也就是 window（因为外层是普通函数 innerFunction，其 this 指向 window）。
2. 箭头函数对作用域链的影响：
   • 箭头函数不创建自己的作用域，它的作用域基于外层词法作用域。在这个例子中，arrowFunction 可以访问 innerFunction 的作用域（可以访问 b）和 outerFunction 的作用域（可以访问 a），因为它遵循词法作用域规则。它没有自己独立的作用域，所以不会干扰外层作用域链的正常查找。
3. 箭头函数对函数提升机制的影响：
   • 普通函数存在函数提升，即函数声明会被提升到所在作用域的顶部，可以在声明之前调用。而箭头函数不存在函数提升，因为它本质上是一个表达式，不是函数声明。在给定代码中，innerFunction 是函数声明，在 outerFunction 作用域内存在函数提升。而 arrowFunction 是箭头函数表达式，不会被提升，它在定义的位置才会被解析和创建。
4. 输出结果及原因：
   • 输出结果：在浏览器环境非严格模式下，会输出 window（或者全局对象），1，2。
   • 原因：this 指向 window 是因为箭头函数的 this 继承自外层普通函数 innerFunction 的 this，而 innerFunction 的 this 在非严格模式下独立调用指向 window。a 的值为 1 是因为 arrowFunction 可以访问外层 outerFunction 作用域中的 a。b 的值为 2 是因为 arrowFunction 可以访问外层 innerFunction 作用域中的 b。