javascript - 对象字面量中的箭头函数

标签 javascript ecmascript-6 babeljs object-literal arrow-functions

<分区>

我想弄清楚为什么对象字面量中的箭头函数是用 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(); 不作为 this 调用 arrowObject？

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

最佳答案

请注意，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);来自您的严格模式转译。

I'm trying to figure out why an arrow function in an object literal is called with window as this.

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

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

... this是window . (这表明您没有使用严格模式；我建议在没有明确理由不这样做的情况下使用它。)如果它是其他东西，例如 undefined严格模式全局代码，this在箭头函数中将是另一个值。

如果我们将你的初始化器分解成它的逻辑等价物，那么创建箭头函数的上下文可能会更清楚一些:

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

关于javascript - 对象字面量中的箭头函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36717376/

上一篇：javascript - 如何从 Promise 中提取数据

下一篇：javascript - 将数组传递给 React 中的组件属性

相关文章：

javascript - 如何在 gatsbyjs 中创建带参数的路由

javascript - 为什么在http请求获取和响应中需要两个 `Promise.all`实例？

javascript - Node 模块可以相互要求吗

javascript - 将 ES7 async/await 与 Node 、webpack 和 babel-loader 一起使用时出错

javascript - 从 webpack.config.js 禁用 babel 严格模式

javascript - JS : What do the curly braces inside function parameter declarations mean?

Javascript Regex 忽略特定捕获组的大小写

javascript - 更好的方式 “loop” promises

javascript - 导出函数不是函数？

javascript - 在 mocha-jsdom 中使用 jQuery 时如何修复 "ReferenceError: $ is not defined"？