Funciones de flecha y esto [duplicate]

4 minutos de lectura

Funciones de flecha y esto duplicate
gracias

Estoy probando ES6 y quiero incluir una propiedad dentro de mi función así

var person = {
  name: "jason",

  shout: () => console.log("my name is ", this.name)
}

person.shout() // Should print out my name is jason

Sin embargo, cuando ejecuto esta consola de código solo registra my name is. ¿Qué estoy haciendo mal?

  • es6fiddle.net

    – gracias

    1 de marzo de 2015 a las 19:59

  • this en este caso es Ventana.

    –Logan Lee

    26 de junio de 2020 a las 1:19

Funciones de flecha y esto duplicate
Sean Vieira

Respuesta corta: this puntos en el límite más cercano this – en el código proporcionado this se encuentra en el ámbito de aplicación.

Respuesta más larga: funciones de flecha
no tener this, arguments u otros nombres especiales vinculados en absoluto – cuando el objeto se está creando el nombre this se encuentra en el alcance adjunto, no en el person objeto. Puede ver esto más claramente moviendo la declaración:

var person = {
  name: "Jason"
};
person.shout = () => console.log("Hi, my name is", this);

Y aún más claro cuando se traduce en una vaga aproximación de la sintaxis de flecha en ES5:

var person = {
  name: "Jason"
};
var shout = function() {
  console.log("Hi, my name is", this.name);
}.bind(this);
person.shout = shout;

En ambos casos, this (para la función de grito) apunta al mismo alcance que person se define en, no el nuevo ámbito al que se adjunta la función cuando se agrega a la person objeto.

no poder hacer que las funciones de flecha funcionen de esa manera, pero, como señala @kamituel en su respuesta, usted lata aproveche el patrón de declaración de método más corto en ES6 para obtener ahorros de espacio similares:

var person = {
  name: "Jason",
  // ES6 "method" declaration - leave off the ":" and the "function"
  shout() {
    console.log("Hi, my name is", this.name);
  }
};

Funciones de flecha y esto duplicate
kamituel

De acuerdo con @Sean Vieira – en este caso this está vinculado al objeto global (o, como se señaló en el comentario, más generalmente a un ámbito adjunto).

Si desea tener una sintaxis más corta, hay otra opción: los literales de objetos mejorados admiten una sintaxis corta para las funciones de propiedad. this será atado como usted espera allí. Ver shout3():

window.name = "global";

var person = {
    name: "jason",

    shout: function () {
        console.log("my name is ", this.name);
    },
    shout2: () => {
        console.log("my name is ", this.name);
    },
    // Shorter syntax
    shout3() {
        console.log("my name is ", this.name);
    }
};

person.shout();  // "jason"
person.shout2(); // "global"
person.shout3(); // "jason"

  • Upvoted, pero nota this no será necesariamente el objeto global.

    – Oriol

    1 de marzo de 2015 a las 20:11

  • @Oriol cierto, anotado: supuse que este es un código de nivel superior. ¡Gracias!

    – kamituel

    01/03/2015 a las 20:15

1646956326 377 Funciones de flecha y esto duplicate
Tenbrink

La respuesta aceptada es excelente, concisa y clara, pero explicaré un poco lo que dijo Sean Vieira:

Las funciones de flecha no tienen estos argumentos u otros nombres especiales vinculados en absoluto.

Debido a que la función de flecha no tiene un “esto”, usa el “esto” del padre. “esto” siempre apunta al padre, y el padre del objeto persona es Ventana (si está en un navegador).

Para probarlo ejecuta esto en tu consola:

var person = {
    name: "Jason",
    anotherKey: this
}
console.log(person.anotherKey)

Obtendrás el objeto Ventana.

Considero que esta es una forma muy útil de pensar en ello. No es toda la historia, ya que el “esto” de un objeto literal es otra discusión.

  • brillante – ¡trato de entender por qué sucede tanto tiempo!

    – yehonatán yehezkel

    25 de junio de 2018 a las 17:04

  • Muy claramente explicado. Gracias.

    – Alok Ranyan

    2 de junio de 2019 a las 8:45

Aquí, el valor de este interior de la función está determinado por dónde se define la función de flecha, no por dónde se usa.

Entonces this se refiere al objeto global/ventana si no está envuelto en otro espacio de nombres

El problema es ese (MDN)

Una expresión de función de flecha […] une léxicamente el valor this.

Las funciones de flecha capturan el valor this del contexto envolvente.

Por lo tanto, el valor de this en esa función será el valor de this donde creas el objeto literal. Probablemente, eso será window en modo no estricto y undefined en modo estricto.

Para solucionarlo, debe utilizar una función normal:

var person = {
  name: "jason",
  shout: function(){ console.log("my name is ", this.name) }
}
person.shout();

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad