为什么在 function 中可以使用稍后声明的变量

Question

我正在写一个对话框组件，这个想法突然出现在我的脑海中。

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 中的 function 中包装一些表达式，但从未想过。

情况可以简化为以下：

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

这种行为叫什么？ 跟闭包有关系吗？ 还是可变提升？

Answer 1

这与变量声明和 scope 管理和执行阶段的基础有关。 此处阻塞的 scope 变量（let，const）的变量声明实际上被提升但未初始化。 Js 引擎简单地拒绝对未初始化的变量标识符的任何操作。

还有一个著名的术语称为时间死区（TDZ）。 在这种情况下，func 位于其 TDZ 中。

希望这可以帮助。

Answer 2

好问题。 第一个样本上的 onClick 有效，因为它返回一个新的 Function object。 function 的主体在被调用之前不会被评估。

()=>closeModal()

我认为您指的是“吊装”。 要吊装 function，您需要声明如下

const caller = () => {
  func() // ok
}
func() 
function func () {}