如何访问浏览器 Window 对象中的 JavaScript 类及其方法？

Question

我有一个 JavaScript 类，我想从另一个文件中读取并设置一个名为selection of it 的属性，并且我试图从浏览器window对象访问类/方法，但该类没有显示在那里。

我看到其他类，如 JQuery。 如何让我的班级显示在全局访问窗口中？

这是我希望做的：

class UI {
    constructor() {
        this.selection = {}; // I want to read and set this property
    }

}

从另一个文件中，我希望做这样的事情：

if( window.UI.selection.name ) {
    window.UI.selection.name = 'A new name';
};

有没有办法让一个类在window中全局访问？

Answer 1

关于访问 UI

由于类是现代 JS 的一部分，因此它们与let和const变量一样，如果它们是在全局范围内创建的，它们不会将自己附加到window对象。

您可以使用其名称访问 UI 类，即使在不同的文件中，只要您不隐藏UI 变量即可。

 <script> class UI { constructor() { this.selection = {}; // I want to read and set this property } } </script> <script> console.log(UI); </script>

例外情况是如果您使用的是模块，在这种情况下，每个模块都有自己的范围。

在这种情况下，您可以显式分配window对象（ window.UI = UI ），但您不应该这样做。 请改用import和export 。

访问 UI.selection.name

selection是由构造函数在 UI 类的实例上创建的对象。

它只出现在类的实例上，而不出现在类本身上。

要访问它，您必须首先创建一个实例：

const ui = new UI();
ui.selection.name = "foo";

Answer 2

如果你想定义一个类并使用它自己的实例变量，你可以这样做

class UI {
    constructor() {
        this.selection = {}; // I want to read and set this property
    }
}

window.UI = new UI()
window.UI.selection.name = "foo"
console.log(window.UI.selection.name)

如果你想使用没有new但有静态变量的类，你可以编写以下内容：

class UI {
    static selection = {}
}

window.UI = UI
window.UI.selection.name = "foo"
console.log(window.UI.selection.name)

参考：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes