javascript - Función de flecha en objeto literal

ecmascript-6 babeljs

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Las ''Funciones de flecha'' y las ''Funciones'' son equivalentes / intercambiables? 1 respuesta
• Métodos en objetos ES6: uso de funciones de flecha 4 respuestas

Estoy tratando de averiguar por qué una función de flecha en un objeto literal se llama con una window como this . ¿Alguien me puede dar una idea?

var arrowObject = {
  name: ''arrowObject'',
  printName: () => {
    console.log(this);
  }
};

// Prints: Window {external: Object, chrome: Object ...}
arrowObject.printName();

Y un objeto que funciona como se esperaba:

var functionObject = {
  name: ''functionObject'',
  printName: function() {
    console.log(this);
  }
};

// Prints: Object {name: "functionObject"}
functionObject.printName();

Según Babel REPL , se trasladan a

var arrowObject = {
  name: ''arrowObject'',
  printName: function printName() {
    console.log(undefined);
  }
};

Y

var functionObject = {
  name: ''functionObject'',
  printName: function printName() {
    console.log(this);
  }
};

¿Por qué no es arrowObject.printName(); llamado con arrowObject como this ?

Los registros de la consola son de Fiddle (donde se use strict; no se usa).

Answer 1

Tenga en cuenta que la traducción de Babel está asumiendo un modo estricto, pero su resultado con window indica que está ejecutando su código en modo suelto. Si le dice a Babel que asuma el modo suelto, su transpilación es diferente :

var _this = this;                    // **

var arrowObject = {
  name: ''arrowObject'',
  printName: function printName() {
    console.log(_this);              // **
  }
};

Tenga en cuenta _this global y console.log(_this); , en lugar de console.log(undefined); de tu transpilación en modo estricto.

Estoy tratando de averiguar por qué una función de flecha en un objeto literal se llama con una window como this .

Porque las funciones de flecha heredan this del contexto en el que se crean. Aparentemente, donde estás haciendo esto:

var arrowObject = {
  name: ''arrowObject'',
  printName: () => {
    console.log(this);
  }
};

... this es la window . (Lo que sugiere que no está usando el modo estricto; recomendaría usarlo donde no haya una razón clara para no hacerlo). Si fuera algo más, como el código global de modo estricto undefined , this dentro de la función de flecha sería que otro valor en su lugar.

Puede ser un poco más claro cuál es el contexto donde se crea la función de flecha si dividimos su inicializador en su equivalente lógico:

var arrowObject = {};
arrowObject.name = ''arrowObject'';
arrowObject.printName = () => {
  console.log(this);
};