Estoy tratando de entender a que hace referencia la palabra clave 'this' en un arrow function de JavaScript pero la verdad no logro entenderlo. En palabras sencillas ¿a que hace referencia el this en un arrow function?
Por ejemplo, en el siguiente código:
const persona = {
nombre: "Juan",
edad: 35,
altura: 1.78,
mostrarDatos: () => `Me llamo ${this.nombre} tengo ${this.edad} y mido ${this.altura}`
}
console.log(persona.mostrarDatos()); // Imprime undefined en las variables
Mientras que si lo pongo de esta otra manera, si hace referencia al objeto
const persona = {
nombre: "Juan",
edad: 35,
altura: 1.78,
mostrarDatos: function() {
const mostrar = () => console.log(`Me llamo ${this.nombre} tengo ${this.edad} años y mido ${this.altura}`)
mostrar();
}
}
persona.mostrarDatos();
Entonces a que hace referencia?
persona
es el window, con lo cual intentará buscar la variablewindow.nombre
. En el segundo caso, el padre de tu arrow function es una función, y el padre de esa función es el objetopersona
, por eso ahí si funciona. Es decir, elthis
siempre será elscope
del padre de la arrow function... resumido: this en una función de flecha, es el padre del padre de la función. He intentado simplificarlo todo lo que puedo, intentando no liarme en el proceso!