为什么谷歌浏览器不支持这种JavaScript语法？

Question

我像这样初始化了一个JavaScript/jQuery点击监听器：

$("#test").on("click", () => {
   console.log("test");
});

这段代码在Firefox中可以完美运行，但在Chrome中会出现语法错误。

为什么会这样，因为在我看来这似乎是“好”的语法。

您可以在控制台中快速测试此代码：

 var a = () => {return 0;}
 a();

在Firefox 27.0.1中，此代码返回0，在Chrome中返回SyntaxError: Unexpected token )

- Biketire

---

你有什么背景，让你认为Lambda表达式的语法是“可以接受”的？每个人都很兴奋终于在草案中看到它，但是需要时间才能接受草案并实现该功能。在此之前，JavaScript 从未使用Lambda表达式。 - Wiktor Zychla

@WiktorZychla - 也许他是从CoffeeScript中得到的这个=>符号？只是猜测而已。 - James Allardice

@JamesAllardice：或者 TypeScript，这就是我感到好奇的原因。 - Wiktor Zychla

@WiktorZychla 不，lambda表达式已经存在很久了 - 这只是一种新的语法；-）例如：var a = function(){return 0;}; ... 还有$("#test").on("click", function(){console.log("test");}); - imma

@imma：大多数人问到“区别”时不会将匿名函数识别为“lambda”，因为“lambda”通常指的是新的“箭头语法”。从技术上讲，你是正确的，但问题特别涉及新语法。 - Wiktor Zychla

Answer 1

“fat arrow”（胖箭头）是ES6的一个特性（现在正式称为ECMAScript 2015）。它已经在Firefox中引入，但其他浏览器尚未引入（尤其是V8中没有完全引入，这对于nodejs/iojs开发非常有趣）。

由于它大多是糖，最好在使用之前等待一下。

如果您需要作用域绑定（this在函数调用和函数定义的范围内相同，我们称之为“词法this”），则可以使用以下语法代替：

$("#test").on("click", () => {
   some code
});

你可以简单地做

$("#test").on("click", (function() {
   some code
}).bind(this));

如果您不这样做（就像您的示例中那样），那么只需执行

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

- Denys Séguret

---

在第二个示例中，您不需要在函数周围加括号。$("#test").on("click", function() { some code }.bind(this)); 是有效的。 - plus-

@MarcoLuglio，您的理解有误。请参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Lexical_this 了解更多信息。 - Denys Séguret

请澄清在箭头函数中如何定义this，我正在经历JavaScript危机。 - Muhammad Umer

太棒了！！我最近在Chrome（版本48.0.2564.97（64位））中尝试了它，并发现它可以工作。看一下。 - Raju Singh

是的，现在所有主要浏览器都可以正常工作（这个回答已经一年了）。 - Denys Séguret