ES6箭头函数丢失变量提升特性，如何借助Babel实现类似效果？

嘿，这个问题我之前也和团队掰扯过，正好给你梳理清楚：

首先得明确一个核心点：你想要的“先调用后定义”本质依赖的是函数声明的变量提升特性，但箭头函数是通过const/let声明的变量，而ES6里const/let本身就存在「暂时性死区（TDZ）」——在变量声明语句之前访问它会直接抛出ReferenceError，这是语言规范层面的限制，不是Babel能直接绕过的。

为什么函数声明可以，箭头函数不行？ #

• 函数声明（function abc() {}）会被完整提升到作用域顶部：不仅声明会提前，连函数体的初始化也会提前，所以不管你在作用域的哪个位置调用它都能正常执行。
• 而用const abc = () => {}声明的箭头函数，本质是「用const声明一个变量，再把箭头函数表达式赋值给它」。const的声明会被提升，但不会初始化，在声明语句之前的区域属于TDZ，此时访问abc会直接报错，更别说调用它了。

Babel能解决这个问题吗？ #

答案是不能直接实现。Babel的核心是把高版本JS转译为低版本，但它必须遵循JS的语言规范，不能凭空创造不符合规则的特性：

• 如果强行把const abc = () => {}转译为函数声明function abc() {}，虽然能获得提升，但会丢失const的不可变性（函数声明的变量可以被重新赋值），而且这也违背了你同事反感function关键字的初衷。
• 没有现成的Babel插件能让const/let声明的箭头函数拥有函数声明的提升能力——因为这相当于破坏了TDZ规则，转译后的代码会和原代码的语义不一致。

那有没有折中方案？ #

如果团队一定要坚持用箭头函数，同时想要避免调用顺序的问题，有两个可行的思路：

1. 统一把箭头函数的声明放在作用域最顶部：这是最直接的办法，确保所有函数在调用前都已经完成初始化，本质上是手动模拟了“提升”的效果。
2. 区分场景使用函数类型：和同事沟通，对于需要提前调用的函数（比如工具函数、初始化逻辑里的调用），还是用函数声明；其他场景（比如回调、不需要提前调用的逻辑）用箭头函数，兼顾提升特性和箭头函数的简洁性/this绑定优势。

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