Say I have an HTML file that looks like this:
<body>
<script>
class InlineClass {
constructor(){
this._title = 'Im inline javascript';
}
}
const myInlineClass = new InlineClass();
</script>
<script src="./external.js"></script>
<script type="module" src="./index.js"></script>
</body>
I have 3 main classes. You can see InlineClass above.
Inside external.js I have the following:
class ExternalFile{
constructor(){
this._title = 'Im an external javascript file';
}
}
const myExternal = new ExternalFile();
And finally, my last example consists of index.js
import ModuleFile from "./module.js";
const myModule = new ModuleFile();
and module.js
class ModuleFile{
constructor(){
this._title = 'Im a module';
}
}
export default ModuleFile;
Why is the module the only instance of a class that isn't accessible to the window object? Here's a screenshot of my console.
I've ruled out any potential CORS issues by adding a console.log to index.js which then lets me see it.
So what exactly is going on here? Why do I get different results?
