What It Is
This is an arrow function.箭头函数是ECMAScript 6引入的简短语法,其使用方式与使用函数表达式的方式相似.换句话说,你可以经常用它们来代替像function (foo) {...}
这样的表达式.但他们有一些重要的不同之处.例如,它们不绑定自己的值this
(参见下面的讨论).
箭头函数是ECMAscript 6规范的一部分.它们还没有在所有浏览器中得到支持,但从2018年起,它们在in Node v. 4.0+种和大多数现代浏览器中得到了部分或完全支持.(我在下面列出了部分支持浏览器的列表).
You can read more in the Mozilla documentation on arrow functions
来自Mozilla文档:
与function expressions相比,箭头函数表达式(也称为胖箭头函数)具有更短的语法,并且在词汇上绑定this
值(不绑定其自身的this
、arguments
、super
或new.target
).箭头函数始终是匿名的.这些函数表达式最适合非方法函数,不能用作构造函数.
A Note on How this
Works in Arrow Functions
箭头函数最方便的功能之一隐藏在上面的文本中:
一个箭头函数...按词汇绑定this
值(不绑定自己的this
…)
更简单地说,这意味着arrow函数保留了上下文中的this
值,而没有自己的this
.传统函数may根据其定义和调用方式绑定自己的this
值.这可能需要很多练习,比如self = this;
等,才能从一个函数中访问或操纵this
.有关此主题的更多信息,请参阅the explanation and examples in the Mozilla documentation.
Example Code
示例(也来自文档):
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]
Notes on Compatibility
您可以在Node中使用箭头函数,但对浏览器的支持参差不齐.
浏览器对此功能的支持已经有了相当大的改进,但是对于大多数基于浏览器的使用来说,它仍然不够广泛.自2017年12月12日起,当前版本的:
- chromium (v.45+)
- Firefox(22+版)
- 边缘(v.12+)
- 歌剧(32+号)
- 安卓浏览器(47+节)
- Opera Mobile(33+版)
- Android版Chrome(47+版)
- 适用于Android的Firefox(v44+)
- 狩猎(10+版)
- IOS Safari(10.2+版)
- 三星互联网(v.5+)
- 百度浏览器(7.12+版)
在以下情况下不受支持:
- IE(通过第11节)
- Opera Mini(至8.0版)
- 黑莓浏览器(第10节)
- IE Mobile(通过第11节)
- 适用于Android的UC浏览器(通过第11.4节)
- QQ(通过1.2版)
您可以在CanIUse.com(无从属关系)找到更多(更新的)信息.