Hay una serie de reglas que nos pueden ayudar a saber cuál es el contexto de ejecución vinculado a una función (this
binding).
This binding en Event handlers
Cuando se declara una función anónima con la sintáxis function
, el this
vinculado es:
- El objeto que llama a la función (En este caso el
Div
opc[i]
)
Esto funciona:
//Este si me funciona
opc[i].onclick = function(){
console.log(this.innerHTML);
}
Cuando se declara una función anónima con la sintáxis arrow
, el this
vinculado puede ser:
- Strict Mode:
undefined
- No Strict Mode : El objeto Global
Window
Esto no funciona:
//Este no me funciona
opc[i].onclick = ()=>{
console.log(this.innerHTML);
}
Observando las reglas para arrow function
Dicho lo anterior, para el caso de la sintáxis arrow
, supongamos que se esta trabajando en Strict Mode
, al dar click a alguno de los div's
, Javascript regresará:
TypeError: undefined is not an object (evaluating 'this.innerHTML')
Porque, de acuerdo con las reglas listadas anteriormente, el valor de this
de la función arrow
del onclick
tiene vinculado undefined
; entonces undefined.innerHTML
no es un objeto.
Después, supongamos que se está trabajando en Non Strict Mode
, al dar click a alguno de los div's
, Javascript regresará:
undefined
Porque, de acuerdo con las reglas listadas anteriormente, el valor de this
de la función arrow
del onclick
tiene vinculado el objeto global Window
.
Además de que opc[i]
no es parte del objeto global Window
, Javascript asigna valor undefined
a propiedades no definidas, por eso se tiene undefined
para this.innerHTML
, pues innerHTML
no está definída en el objeto global Window
.
Notas de campo
Es un tema complicado, yo sugiero que trates de que tenga sentido conforme encuentres casos de uso, como este.
Las reglas pueden cambiar dependiendo el Javascript hosting enviroment (Browser, node.js etc...)
Puede haber problemas de referencias al usar funciones anónimas en Event handlers, sobre todo cuando se trata de remover el Event handler.
Uso de this en Event Handlers
Uso de This en funciones
Espero que esta respuesta sea de ayuda
this
no es el mismo en las funciones flecha, que en las funciones convencionales. Te invito a leer el siguiente artículo -en inglés- en el que podrías encontrar más detalles y diferencias entre las funciones convencionales y las funciones flecha.