为什么可以在函数内部使用稍后声明的变量

Question

我正在编写一个Dialog组件，这个想法突然浮现在我的脑海。

export const alert = (content: string) => {
  const buttons = [<button onClick={()=>closeModal()}>ok</button>] // quite ok 
  // const buttons = [<button onClick={closeModal}>ok</button>] // raise an error
  const closeModal = modal(content, buttons)
}

错误是：在声明之前使用块范围内的变量'closeModal'。我很习惯在React中的函数中包装一些表达式，却从未考虑过。

情况可能会简化为以下内容：

const caller = () => {
  func() // ok
}
const funcAgain = func // error
func() // error
const func = () => {}

这种行为叫什么？它与关闭有关吗？还是可变吊装？

Answer 1

这与变量声明和作用域管理以及执行阶段的基础有关。在这里，实际上已提升但未初始化阻塞范围变量（let，const）的变量声明。 Js引擎只是拒绝对未初始化的变量标识符进行任何操作。

Answer 2

好问题。第一个示例的onClick起作用是因为它返回了一个新的Function对象。该函数的主体在被调用之前不会得到评估。