为何可在初始化前使用JavaScript箭头函数？与既定规则矛盾求解

你混淆了函数的定义时机和函数的执行时机，这是问题的核心：

• 你的代码里，const x = () => {...}属于函数表达式，x变量会被提升，但提升后的值是undefined，如果在y定义前直接调用x()，必然会报错。但你并没有这么做——你是在const y = () => {...}执行完成、y已经被赋值为箭头函数之后，才在HTML里调用的x()。
• 当x()真正执行时，y已经完成了初始化，所以在x内部调用y()自然是合法的，完全符合函数表达式“必须先初始化再调用”的规则。

举个反例，如果把x()的调用放在y定义之前，就会触发预期的错误：

const x = () => {
  console.log('hello x')
  y() // 此时y还未初始化，会抛出ReferenceError
}

x() 

const y = () => {
  console.log('hello y')
}

简单说，你只是在x的定义里写了调用y的代码，但这段调用逻辑并没有在y定义前执行——真正执行调用的时候，y已经存在了。

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