為什么在 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 () {}