对象文本中的箭头函数[重复]

Question

我试图弄清楚为什么对象文本中的箭头函数被调用为window作为this。有人能给我点见识吗？

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

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

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

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

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

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

控制台日志来自Fiddle（其中使用strict；不使用）。

Answer 1

请注意，Babel转换假设是严格模式，但是窗口的结果表明您在宽松模式下运行代码。如果你告诉巴别塔假设松散模式，它的Transpililation是不同的：

var _this = this;                    // **

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

请注意_this全局和console.log(_this)；，而不是严格模式Transpilation中的console.log（未定义）；。

我试图弄清楚为什么对象文本中的箭头函数被调用为window作为this。

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

...此是窗口。（这表明您没有使用严格模式；我建议在没有明确理由不使用严格模式的情况下使用严格模式。）如果是其他值，例如严格模式全局代码的undefined，则箭头函数中的this将是其他值。

如果我们将初始化器分解为其逻辑等效项，那么创建箭头函数的上下文可能会更清楚：

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