Acabo de terminar una larga sesión de depuración y, aunque resolví el problema, no tengo idea de por qué mi solución es necesaria.
Tengo un archivo Update.js que se ve así:
class Update { static doThisAfterClick = (event) => { console.log("First button clicked!"); } static doThisWhenCalled = (name, age) => { console.log("My name is " + name + " and my age is " + age); } } export default Update; En Edit.js importo el módulo:
let Update = require('./Update'); class Edit { static fancyEventHandler = (event) => { Update.doThisWhenCalled("Peter", 42); } } export default Edit; y luego, en app.js , agrego algunos controladores de eventos:
import Edit from "./Edit"; import Update from "./Update"; firstButton.addEventListener('click', Update.doThisAfterClick); secondButton.addEventListener('click', Edit.fancyEventHandler); Ahora la parte loca: Al hacer clic en el primer botón registrado ¡Se hizo clic en el First button clicked! como se esperaba, pero al hacer clic en secondButton se produjo un error: Uncaught TypeError: Update.doThisWhenCalled is not a function. .
De hecho, traté de depurar esto insertando
let x = Update.doThisWhenCalled; debugger; en fancyEventHandler() y vio que x no estaba definido.
Por pura suerte, vi que podía usar
Update.default.doThisWhenCalled("Peter", 42);en su lugar y esto resolvió el problema. No tengo idea de por qué.
¿Qué hay de malo en llamar directamente al método estático? ¿Y qué es esta propiedad "predeterminada"?
Creo que está relacionado con la forma en que está exportando/importando, a continuación hay una posible solución:
Actualizar.js:
class Update { static doThisAfterClick() { console.log("First button clicked!"); } static doThisWhenCalled(name, age) { console.log("My name is " + name + " and my age is " + age); } } export default Update;Editar.js:
import Update from "./Update"; class Edit { static fancyEventHandler() { Update.doThisWhenCalled("Peter", 42); } } export default Edit;