0

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?

4
  • 2
    En el primer caso, el scope de persona es el window, con lo cual intentará buscar la variable window.nombre. En el segundo caso, el padre de tu arrow function es una función, y el padre de esa función es el objeto persona, por eso ahí si funciona. Es decir, el this siempre será el scope 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!
    – Benito-B
    el 22 dic. 2020 a las 22:05
  • Lo que dice @Benito-B x2, igual considera aportar una respuesta
    – BetaM
    el 22 dic. 2020 a las 22:08
  • Si te entiendes con el inglés, te recomiendo leer este artículo de codementor donde lo explica bastante mejor que yo.
    – Benito-B
    el 22 dic. 2020 a las 22:09
  • Gracias a los que respondieron, ya lo logré entender :) el 22 dic. 2020 a las 22:27

1 respuesta 1

0

El this en un arrow function hace referencia a la ventana global window, es decir si definimos una variable nombre en la ventana global, encontrará la referencia.

Ejemplo:

window.nombre = 'Juan';
window.edad = 23;
// no definimos altura en window    

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

Verás que en este ejemplo la variable altura no esta definida en window y como el this en el arrow function se dirige a la ventana global window, la variable altura sale no definida. Entonces el this.nombre y el this.edad ya tienen valores definidos, pero no son los valores nombre y edad del objeto persona.

Recuerda que los arrow functions a pesar de que nos ayudan a reducir el código, también tiene incorporado sus diferencias.

Más información aquí

Buena suerte.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.