Estoy haciendo un juego simple con javascript en el que puedes disparar balas a los enemigos. En realidad no tengo ningún problema en hacerlo, pero:
Hice una clase para mis viñetas que tiene una función Mover y quiero establecer un intervalo para ella, pero cuando configuro un intervalo en mi constructor de esta manera:
setInterval(this.Move, 0);Veo este error:
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'estilo') en Move (game.js: 152)
Pero cuando configuro e invierto así:
setInterval(() => { this.Move(); }, 0);Funciona sin ningún problema.
Solo quiero saber qué está mal con el primero, creo que de la segunda manera, estás haciendo algo extra (expresión lambda).
Clase de bala: https://i.stack.imgur.com/q23Lk.png
Es una buena pregunta. La diferencia clave es el uso de la función de flecha. Las funciones de flecha están diseñadas para vincularse al ámbito en el que están definidas.
Simplemente pasando this.Move a setInterval , setInterval invocará la función sin vincularse al alcance de la clase/instancia.
El siguiente código muestra varias formas en que podría haber pasado esto. setInterval this.Move Algunos tienen el alcance correcto, otros no, espero que esto ayude a su comprensión.
let outside_function = undefined; class X { constructor() { this.message = 'moving' // function is not bound to instance setInterval(this.move, 1000); // undefined // function is bound to instance setInterval(this.move.bind(this), 1000) // 'moving' // arrow function binds to 'this' setInterval(() => this.move(), 1000) // 'moving' // outside_function has no relationship with the class outside_function = this.move; setInterval(outside_function, 1000); // undefined setInterval(outside_function.bind(this), 1000) // 'moving' } move() { console.log(this.message) } } // also note that we can call the function like this // again, no class instance here X.prototype.move() // undefined new X();