Estoy importando mi "módulo" de JavaScript usando la llamada " import() ":
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><title>Module</title><style>:root { background: #545454; }</style>
<script>
window.addEventListener('load', e => {
import('./script.js').then(async module => {
const fn = await module.myFunction();
fn.whatever();
});
});
</script>
</head>
<body></body></html>
y este es el archivo script.js :
export async function myFunction() {
this.whatever = function () {
console.log('Ok');
};
return this;
}
Al ejecutarlo, Google Chrome se queja de que el " object is not extensible " mientras agrega lo que whatever :
script.js:2 Uncaught (in promise) TypeError: Cannot add property whatever, object is not extensible at Module.myFunction (script.js:2:19) at module.html:12:33
Entonces, ¿qué está mal y cómo solucionar el problema?
El module en la devolución de llamada then en esa import() es el objeto de espacio de nombres del módulo para el módulo. Ese es un objeto que crea el motor de JavaScript que tiene propiedades para las exportaciones del módulo. El MNO no es extensible; su propósito es reflejar con precisión las exportaciones del módulo. Si pudiera agregarle propiedades (extenderlo), ya no reflejaría con precisión las exportaciones del módulo.
Cuando llama a module.myFunction() , this durante la llamada se establece en module durante la llamada, que es el objeto de espacio de nombres del módulo no extensible. Entonces la línea this.whatever = ___ en myFunction falla, porque está tratando de crear una nueva propiedad en un objeto no extensible.
Solo como una adición: no está claro qué está tratando de hacer con myFunction , pero podría crear un nuevo objeto que use el MNO como su prototipo y agregarle una propiedad.
export async function myFunction() {
const obj = Object.create(this);
obj.whatever = function () {
console.log("Ok");
};
return obj;
}
No recomendaría hacer eso sin una buena razón (y eliminaría el async a menos que la función use await ), pero funcionaría.