I have a JavaScript class that I want to read and set a property called selection of it from another file, and I was trying to access the class/methods from the browser window object, but the class doesn't show up there.

I see other classes like JQuery. How can I get my class to show up in the window for global access?

Here's what I was hoping to do:

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

}

And from another file, I was hoping to do something like this:

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

Is there a way to make a class globally accessible in the window?

CodePudding user response：

If you want to define a class and use its own instance variable, you can do this

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)

If you want to use class without new but with static variable, you can write the following:

class UI {
    static selection = {}
}

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

Refrence:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

CodePudding user response：

On access to UI

Since classes are a part of modern JS they, like let and const variables, do not attach themselves to the window object if they are created in the global scope.

You can access the UI class with its name, even in a different file, so long as you don't shadow the UI variable.

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

}
</script>

<script>
    console.log(UI);
</script>

The exception to this is if you are using modules, in which case each module will have its own scope.

In that case you could explicitly assign the the window object (window.UI = UI) but you shouldn't. Use import and export instead.

On access to UI.selection.name

selection is an object which is created on instances of the UI class by the constructor function.

It only appears on instances of the class and does not appear on the class itself.

To access that you must first create an instance:

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