JavaScript箭头函数定义前调用报错原因及使用限制

console.log(addB(10, 15));

function addB(a, b) {
  return a + b;
}

console.log(addC(10, 15));

const addC = (a, b) => {
  return a + b;
};

这个报错的核心原因是JavaScript对两类函数写法的提升规则存在本质差异：

• 用function关键字直接定义的addB属于函数声明，JS引擎在逐行执行代码前的预解析阶段，会把整个函数体提升到当前作用域的最顶端，并且直接完成初始化，所以在声明语句之前调用addB可以正常执行，返回计算结果25。
• 箭头函数本身不属于独立的声明语法，它是函数表达式，本质是把一个函数值赋值给变量addC。例子里用const声明addC，const和let声明的变量虽然也会被提升到作用域顶部，但提升后不会被初始化，从作用域起始位置到变量完成赋值的这段区间叫做暂时性死区，在这个区间内访问该变量就会直接抛出Cannot access 'addC' before initialization错误。
  哪怕把声明addC的关键字换成var，提前调用也会报错，只是错误类型变成"addC is not a function"——因为var声明的变量提升后默认初始值是undefined，还没被赋值为箭头函数，自然没法调用。

箭头函数不是普通函数的通用简写替代品，它有明确的适用边界，核心使用限制包括：

• 没有独立的this绑定：箭头函数内部的this完全继承自定义它时的外层作用域，调用时用call/apply/bind都无法修改它的this指向。不适合用来定义对象方法、DOM事件回调这类需要动态绑定this的场景——比如DOM事件回调默认this指向触发事件的元素，换成箭头函数后this会指向外层全局作用域/外层函数的this，不符合预期。
• 没有自身的arguments对象：在箭头函数内部访问arguments，拿到的是外层作用域的arguments值，不会存储自身调用时传入的参数列表，如果要获取可变参数，只能用ES6的剩余参数...args写法实现。
• 不能作为构造函数使用：箭头函数没有内置的[[Construct]]方法，也没有prototype属性，用new关键字调用箭头函数会直接抛出错误，无法生成实例对象。
• 不能作为Generator函数使用：箭头函数内部不允许使用yield关键字，无法实现生成器的暂停执行逻辑。
• 不允许重名形参：普通非严格模式下的函数可以定义重名的形参，箭头函数无论运行在什么模式下，只要形参重名就会直接抛出语法错误。

内容的提问来源于stack exchange，提问作者Ravindr