面试题：JavaScript函数声明提升与this指向问题

Question

以下代码输出结果是什么，并解释原因。 ```javascript function test() { console.log(a); var a = 1; function a() {} console.log(a); } test(); ``` 同时，在箭头函数中this的指向规则与普通函数有何不同？

Answer 1

1. 上述代码输出结果及原因：
   • 首先，JavaScript 存在变量提升机制。函数声明和变量声明都会被提升到函数作用域的顶部。
   • 对于这段代码，函数 test 内部，var a 和函数 a 的声明都会被提升到顶部，但是函数声明优先级高于变量声明，所以提升后代码相当于：

function test() {
  function a() {}
  var a;
  console.log(a);
  a = 1;
  console.log(a);
}
test();

• 第一次 console.log(a) 时，a 是函数声明提升后的函数，所以输出 [Function: a]。
• 第二次 console.log(a) 时，a 已经被赋值为 1，所以输出 1。
• 综上，输出结果为：

[Function: a]
1

2. 箭头函数中 this 的指向规则与普通函数的不同：
   • 普通函数：this 的指向取决于函数的调用方式。如果是直接调用，在非严格模式下 this 指向全局对象（浏览器中是 window），严格模式下 this 是 undefined；如果是对象方法调用，this 指向调用该方法的对象；通过 call、apply、bind 方法调用时，this 指向传入的第一个参数。
   • 箭头函数：箭头函数没有自己的 this，它的 this 继承自外层作用域。它的 this 指向在定义时就已经确定，不会随着调用方式的改变而改变。例如，在全局作用域中定义箭头函数，箭头函数中的 this 就指向全局对象（浏览器中是 window）；如果在对象方法内部定义箭头函数，箭头函数中的 this 指向该对象方法所属的对象。