将类内的对象分配给javascript中的变量

Question

我希望将类中的某些对象设置为变量，这样我就可以检索变量的内容并在 DOM 中显示。为了测试，我的代码中有这个函数：

    const height = window.instance._height
    
    function debugLogs() {
      console.log(height + 'from context menu')
    }
debugLogs()

这不起作用，因为我从控制台收到以下错误：

为了测试，我从谷歌开发控制台将类对象分配给变量，它在那里工作。谁能告诉我我做错了什么让它在我的代码中工作？谢谢

Answer 1

问题是您试图在定义/分配之前访问window.instance。

通常，在单个“同步”脚本中，这很容易调试和解决。如果涉及更多脚本或模块并且使用“全局”范围进行通信（今天这可能被认为是不好的做法），那么事情可能会很快变得混乱。尤其是在“异步”加载此脚本或模块并创建竞争条件时。

为避免这种情况，应完全避免全局范围污染，应采用模块化架构（使用 Webpack 或其他类似的捆绑器），并且应使用 API 之类的回调/承诺/事件进行跨模块通信。

在您的情况下，请检查您的 <script> 标记的顺序（还要检查它们没有设置 async 或 defer 属性）。定义/分配window.instance 的脚本必须首先运行。如果你不能这样做，你将不得不修改这两个脚本以通过使用事件（阅读here）或其他类似方法来相互“交谈”。

最后一个选择是考虑在您的代码中处理这两种情况（window.instance 可用时和不可用时），但是，这不是一个好方法：

function debugLogs() {
  if (window.instance) {
    const height = window.instance._height;
    console.log(height + 'from context menu');
  } else {
    console.log('Sorry, not available. Try again later.')
  }
}

debugLogs();