Tengo una clase que ejecuta una función cloneButtons durante la construcción. La función cloneButtons toma una matriz oldButtons y devuelve una matriz newButtons con exactamente los mismos elementos. Mi problema es que me encuentro con un comportamiento extraño cuando trato de deconstruir la matriz. Cada vez que uso this para hacer una tarea de clase, las cosas simplemente dejan de funcionar.

Soy nuevo en JS, pero no puedo encontrar ninguna documentación sobre las limitaciones de usar this y por qué no funcionaría al desestructurar el valor de retorno de una función.

Estos son algunos ejemplos de lo que funciona y lo que no. El siguiente código funciona según lo previsto: los elementos en cloneButtons deconstruyen sin problemas.

 constructor () { const oldButtons = document.querySelectorAll('#hero-action-btn-cont button') const [attackBtn, healBtn, specialBtn] = Utils.cloneButtons(oldButtons) attackBtn.addEventListener('click', this.attackHandler.bind(this)) // this works perfectly }

Sin embargo, si trato de asignar los elementos de la matriz usando this mientras se desestructura en cualquier paso del proceso, obtengo una variedad de errores, todos derivados del hecho de que cualquier variable que tenga this permanece sin definir. Esto arroja un error de inicialización:

 constructor () { const oldButtons = document.querySelectorAll('#hero-action-btn-cont button') [this.attackBtn, this.healBtn, this.specialBtn] = Utils.cloneButtons(oldButtons) this.attackBtn.addEventListener('click', this.attackHandler.bind(this)) // cannot access oldButtons before initialization }

Otro método que no funciona:

 constructor () { const oldButtons = document.querySelectorAll('#hero-action-btn-cont button') this.newButtons = Utils.cloneButtons(oldButtons) [this.attackBtn, this.healBtn, this.specialBtn] = this.newButtons this.attackBtn.addEventListener('click', this.attackHandler.bind(this)) // this.attackBtn is undefined }

Para ayudar a identificar lo que va mal, aquí hay otro escenario que funciona perfectamente, que no implica desestructuración:

 constructor () { const oldButtons = document.querySelectorAll('#hero-action-btn-cont button') this.newButtons = Utils.cloneButtons(oldButtons) this.newButtons[0].addEventListener('click', this.attackHandler.bind(this)) //works but does not use destructuring }

Además, ni siquiera puedo ejecutar this.oldButtons = document.querySelectorAll(#id) ya que, por alguna razón, devuelve undefined. ¡¿Que me estoy perdiendo aqui?!