Funciones de flecha y esto [duplicate]

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?

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.

Tú 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);
  }
};

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"

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.

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();