箭头函数是ECMAscript 6引入的一种短语法,可以与使用函数表达式的方式类似地使用。换句话说,您经常可以使用它们代替诸如的表达式function (foo) {...}
。但是它们有一些重要的区别。例如,它们不绑定自己的值this
(请参见下面的讨论)。
箭头功能是ECMAscript 6规范的一部分。尚未在所有浏览器中都支持它们,但是在Node v.4.0 +和截至2018年使用的大多数现代浏览器中都部分或完全支持它们。(我在下面提供了部分支持的浏览器列表)。
从Mozilla文档中:
相比箭头函数表达式(也称为脂肪箭头功能)具有更短的语法函数表达式和词法结合this
值(不结合其自身的this
,arguments
,super
,或new.target
)。箭头功能始终是匿名的。这些函数表达式最适合非方法函数,因此不能用作构造函数。
箭头函数…按词法绑定this
值(不绑定自己的值this
…)
用更简单的术语表示,箭头功能保留了this
上下文中的值,而没有自己的值this
。传统函数 可以 绑定自己的this
值,这取决于其定义和调用方式。这可能需要大量的体操运动,例如self = this;
等,才能this
从另一个功能内部访问或操作。
示例(同样来自文档):
var a = [
"We're up all night 'til the sun",
"We're up all night to get some",
"We're up all night for good fun",
"We're up all night to get lucky"
];
// These two assignments are equivalent:
// Old-school:
var a2 = a.map(function(s){ return s.length });
// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );
// both a2 and a3 will be equal to [31, 30, 31, 31]
浏览器对此功能的支持已经改善了很多,但是对于大多数基于浏览器的用法来说,它仍然不够广泛。自2017年12月12日起,当前版本的软件支持:
不支持:
您可以在CanIUse.com上找到更多(和更多最新信息)(无从属关系)。