为什么JavaScript中标准函数可提前调用，箭头函数与函数绑定不行？

这个问题的核心其实和JavaScript的**变量提升（Hoisting）**机制以及不同函数定义方式的本质有关，咱们一步步拆解清楚：

1. 标准函数声明：被完整提升的特殊待遇 #

JS引擎在执行代码前，会先进入一个编译阶段。对于标准的函数声明（比如function fn() {}这种写法），引擎会把整个函数的定义完整提升到当前作用域的最顶部——也就是说，在代码开始执行的时候，这个函数已经“存在”了，所以你在声明前调用它完全没问题：

// 完全正常执行，输出"Hello!"
sayHi();

function sayHi() {
  console.log("Hello!");
}

这就好比引擎悄悄把你的函数声明挪到了作用域最前面，调用的时候自然能找到它。

2. 箭头函数/函数绑定：本质是变量赋值，只有变量名被提升 #

而箭头函数、函数表达式（包括const fn = function() {}这种绑定方式），本质上是把函数赋值给一个变量。对于这类情况，引擎在编译阶段只会提升变量的声明，不会提升赋值的函数体：

用let/const声明的情况 #

let和const声明的变量虽然也会被提升，但会处于暂时性死区（TDZ）——在变量被赋值之前，你根本无法访问它，所以提前调用会直接报错：

// 报错：Cannot access 'sayHi' before initialization
sayHi();

const sayHi = () => {
  console.log("Hello!");
};

用var声明的情况 #

如果是用var声明的变量，虽然不会触发TDZ报错，但提升后变量的初始值是undefined，而不是函数本身，所以调用的时候会提示“不是一个函数”：

// 报错：sayHi is not a function
sayHi();

var sayHi = () => {
  console.log("Hello!");
};

说白了，这种方式下函数体要等到代码执行到赋值那一行的时候才会被创建，提前调用的时候变量要么还在TDZ里，要么只是个undefined，自然没法正常执行。

总结一下 #

标准函数声明是JS引擎的“特殊照顾对象”，编译阶段就把整个函数搬去了作用域顶部；而箭头函数、函数绑定本质是变量赋值，只有变量名被提前登记，函数体要到执行阶段才会就位——这就是两者能不能提前调用的核心差异啦！

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