A menudo veo código
export default Foo; y Foo puede ser una función o una clase, pero si lo hacemos
export default new Foo();Me dijeron que debería ser un singleton cuando varios archivos en el proyecto lo hacen
import Foo from './Foo';y será el mismo objeto exacto, lo que significa que sería un singleton, pero ¿por qué regla sabemos que se instancia una vez en lugar de múltiples veces?
Creo que la respuesta estándar es que no hay garantía, pero ¿y si usamos webpack (o alguna otra herramienta), podemos saber que está garantizado que es solo uno?
export default new Foo();es lo mismo que:
const foo = new Foo(); export default foo;A medida que se ejecuta el módulo, se crea 1 instancia de Foo. Esa instancia se está exportando, por lo que todos los que la importan obtienen la misma instancia.
Si desea verificar que son exactamente iguales, escriba 2 módulos que importen foo , luego haga que 1 de estos módulos pase su foo al otro a través de una función y haga una comparación a través del operador === .
<html> <head> <script type="module" src="foo.js"></script> <script type="module" src="mod1.js"></script> <script type="module" src="mod2.js"></script> </head> <body></body> </html>foo.js:
export default {};mod1.js:
import myFoo from './foo.js'; export function mod1Func(other_foo) { console.log('same?', other_foo === myFoo); }mod2.js:
import myFoo from './foo.js'; import { mod1Func } from './mod1.js'; mod1Func(myFoo);Y debería imprimir:
same? true