在js中如何引用一个尚未定义的变量

19 阅读1分钟

需求

要写一个弹窗 里面有个按钮 点击按钮后弹窗关闭
用的是antd的Modal组件 大概是这个样子

const Page: FC = () => {
  const app = App.useApp()
  return (
    <Button
      onClick={() => {
        const { destroy } = app.modal.confirm({
          footer: null,
          closable: false,
          content: <Button onClick={destroy}>111</Button>,
        })
      }}
    >
      222
    </Button>
  )
}

这里会报一个错 说在destory定义之前就引用了它
改成onClick={()=>destroy()}就可以了.传递的是一个函数 所以不会报错;调用的时候destroy已经定义完毕了,所以能正常用

所以...

//ts
const num: number = (function (fn: () => number) {
  return fn()
})(() => num)

const num: number = (function (fn) {
  return fn()
})(() => num)

const num = (function (fn: () => number) {
  return fn()
})(() => num)

//js
const num = (function (fn) {
  return fn()
})(() => num)

上面几种写法都是可以通过编译的 但是运行的时候会报num未定义的错误
这是因为虽然()=>num可以正常作为参数使用 但是调用它的时候num的定义过程尚未结束 所以还是引用不了
有点遗憾 我还想试试在ts里搞一个看似number实则undefined的变量