Digamos que tengo un archivo HTML que se ve así:
<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> Tengo 3 clases principales. Puede ver InlineClass arriba.
Dentro de external.js tengo lo siguiente:
class ExternalFile{ constructor(){ this._title = 'Im an external javascript file'; } } const myExternal = new ExternalFile();Y finalmente, mi último ejemplo consiste en index.js
import ModuleFile from "./module.js"; const myModule = new ModuleFile();y módulo.js
class ModuleFile{ constructor(){ this._title = 'Im a module'; } } export default ModuleFile;¿Por qué el módulo es la única instancia de una clase a la que no puede acceder el objeto de la ventana? Aquí hay una captura de pantalla de mi consola.
Descarté cualquier posible problema de CORS agregando un archivo console.log a index.js que luego me permite verlo.
Entonces, ¿qué está pasando aquí exactamente? ¿Por qué obtengo resultados diferentes?