V8 中的 ES6 箭头函数词法 this

Question

我有以下使用粗箭头函数的 ES6 代码：

var test = {
  firstname: 'David',
  fn: function() {
    return ['one', 'two', 'tree'].map(() => this.firstname)
  }
}
console.log(test.fn())

根据箭头函数的工作原理，我希望 this 成为 test 对象。 ES6Fiddle、Traceur 和 Firefox 产生了预期的输出，即 ["David", "David", "David"]。

但是，当使用 chrome://flags/#enable-javascript-harmony 在 Chrome 中启用这些功能时，我得到 [undefined, undefined, undefined]。如果你 console.log(this) 它表明它是 window 对象并且你在严格模式下得到一个错误。 ES6 箭头函数的词法 this 还没有在 V8 中实现吗？

Answer 1

Lexical this 是 ES6 箭头函数在 v8 中的最后一部分，这也是它仍然落后于 flag 且尚未准备好发布的原因。 Igalia 的 Adrian Perez 正在实施箭头函数，一旦解决了一些 TurboFan 问题，最终补丁几乎就可以发布了：https://codereview.chromium.org/883823002/

Answer 2

粗箭头是 ES6 的一个特性。它已经在 Firefox(Gecko) 中引入，但还没有在其他浏览器中引入（尤其是在 V8 中还没有完全引入，这对 nodejs/iojs 开发来说很有趣）。这是一个参考文档

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Browser_compatibility

无论如何，如果您需要范围绑定，请使用 bind() 而不是 =>。这是一个简单的例子。

而不是这个。

$("#example").on("click", () => {
   // your code goes here
});

用这个。

$("#example").on("click", (function() {
   // your code goes here
}).bind(this));

如果您不需要范围绑定，那么只需这样做即可。

$("#example").on("click", function() {
   console.log("example");
});

V8 中的 ES6 箭头函数词法 this

ES6 arrow function lexical this in V8

javascript

this

v8

ecmascript-6

lexical-scope