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

根据Babel REPL，他们已被转换为

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

和

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

为什么没有arrowObject.printName();使用arrowObject作为this来调用<{1}}？

控制台日志来自Fiddle（其中use strict;未使用）。

Answer 1

请注意，Babel转换采用严格模式，但window的结果表明您在松散模式下运行代码。如果你告诉Babel假设松散模式，它的转换is different：

var _this = this;                    // **

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

请注意_this全局和console.log(_this);，而不是严格模式转换中的console.log(undefined);。

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

因为箭头函数从它们创建的上下文继承this。显然，你在哪里这样做：

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

... this是window。（这表明你并没有使用严格的模式;我建议在没有明确理由的情况下使用它。）如果是其他内容，例如严格的undefined模式全局代码，箭头函数中的this将改为其他值。

如果我们将初始化程序分解为逻辑等价物，那么创建箭头函数的上下文可能会更清楚一点：

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

对象文字中的箭头功能

1 个答案: