箭头函数 '() => {}' 在Javascript中是什么意思？

Question

我在阅读ScrollListView源代码时，发现多次使用了() => {}，例如在第25行。

this.cellReorderThreshold = () => {
    var ratio = (this.CELLHEIGHT*this.cellsWithinViewportCount)/4;
    return ratio < this.CELLHEIGHT ? 0 : ratio;
};

第31行，

this.container.addEventListener('scroll', () => this.onScroll(), false);

第88行。

resizeTimer = setTimeout(() => {
    this.containerHeight = this.container.offsetHeight;
}, 250);

这是一个代替 function 的速记法，如果有任何不同之处，是什么?

- cnotethegr8

---

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

Answer 1

这是ES6的新箭头语法。 它不同之处在于对this的处理： function 根据调用上下文获得一个this（传统语义），但箭头函数保留定义上下文的this。

请参见http://tc39wiki.calculist.org/es6/arrow-functions/

- thriqon

---

请注意浏览器兼容性 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions - user3455363

Mozilla的兼容性表似乎没有经常更新。请查看我们的表格以获取最新支持情况-https://kangax.github.io/compat-table/es6/#arrow_functions - kangax

Answer 2

ECMAScript 6 引入了箭头函数，箭头符号 (=>) 是箭头函数语法的一部分。

箭头函数与传统的 JavaScript 函数有所不同。我发现这篇文章解释了它与传统函数的区别: http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/

- Jaykumar Patel