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

Question

我有一个 JavaScript class，我想从另一个文件中读取并设置一个名为 selection 的属性，我试图访问class/methods 来自浏览器 window 对象，但 class 没有显示在那里。

我看到其他 class 喜欢 JQuery。我怎样才能让我的 class 出现在 window 中以进行全局访问？

这是我希望做的事情：

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';
};

有没有办法让 class 在 window 中全局访问？

Answer 1

访问UI

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

您可以使用其名称访问 UI class，即使在不同的文件中，只要您不 shadow 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 class 的实例上创建。

它只出现在 class 的 个实例 上，而不会出现在 class 本身上。

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

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

Answer 2

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

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但有静态变量，你可以这样写：

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

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

How can I access JavaScript Class and it's methods in browser Window object?

javascript

oop

访问UI

访问UI.selection.name