面试题：JavaScript 中函数提升与箭头函数的特性对比

Question

请阐述 JavaScript 中函数提升的原理，并对比箭头函数在函数提升方面与普通函数有何不同。同时，给出一个示例说明箭头函数在作用域方面的特点。

Answer 1

函数提升原理

在JavaScript中，函数提升是指在代码执行之前，函数声明会被提升到其所在作用域的顶部。这意味着即使函数声明在调用之后，依然可以正常调用。例如：

foo();
function foo() {
    console.log('This is a function');
}

在上述代码中，foo()的调用在函数声明之前，但依然能正常执行，这是因为函数声明被提升到了作用域顶部。这是JavaScript引擎在预编译阶段的行为，它会扫描整个作用域，将函数声明提取并提升到作用域的最前面，这样在执行阶段就可以直接调用这些函数。

箭头函数与普通函数在函数提升方面的不同

1. 普通函数：函数声明会被提升到其所在作用域的顶部，可以在声明之前调用。
2. 箭头函数：箭头函数不存在函数提升。箭头函数是表达式，而不是声明，所以不会被提升到作用域顶部。例如：

bar(); // 报错，bar is not a function
const bar = () => console.log('This is an arrow function');

在这段代码中，由于箭头函数是表达式，不会被提升，所以在声明之前调用会报错。

箭头函数在作用域方面的特点示例

箭头函数没有自己的this，它的this是在定义时继承自外层作用域。例如：

const obj = {
    name: 'John',
    printName: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};
obj.printName(); // 输出 'John'

在上述代码中，setTimeout回调函数使用箭头函数，它的this继承自外层printName函数的this，而printName函数作为对象的方法调用，this指向obj，所以能正确输出John。如果这里使用普通函数作为setTimeout的回调，this将指向全局对象（在浏览器环境中是window），会导致输出undefined或其他不符合预期的结果。