这是什么
这是一个箭头函数。箭头函数是 ECMAscript 6 引入的一种简短语法,其使用方式与使用函数表达式的方式类似。换句话说,您经常可以使用它们来代替诸如function (foo) {...}
。但它们有一些重要的区别。例如,他们不绑定自己的值this
(参见下面的讨论)。
箭头函数是 ECMAscript 6 规范的一部分。并非所有浏览器都支持它们,但部分或完全支持它们在 Node v.4.0+ 中以及截至 2018 年使用的大多数现代浏览器中。(我在下面列出了支持浏览器的部分列表)。
您可以阅读更多内容Mozilla 文档关于箭头函数.
来自 Mozilla 文档:
与以下函数相比,箭头函数表达式(也称为胖箭头函数)的语法更短函数表达式并在词法上绑定this值(不绑定自己的this, arguments, super, or new.target)。箭头函数始终是匿名的。这些函数表达式最适合非方法函数,并且不能用作构造函数。
关于如何做的注意事项this
适用于箭头函数
箭头函数最方便的功能之一隐藏在上面的文本中:
箭头函数...词法绑定this
值(不绑定自己的this
...)
简单来说,这意味着箭头函数保留了this
价值来自其上下文并且没有自己的this
。传统功能may绑定自己的this
值,取决于它的定义和调用方式。这可能需要大量的体操,例如self = this;
等来访问或操作this
从一个函数到另一个函数。有关此主题的更多信息,请参阅Mozilla 文档中的解释和示例.
示例代码
示例(也来自文档):
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]
兼容性注意事项
您可以在 Node 中使用箭头函数,但浏览器支持不稳定。
浏览器对此功能的支持已经有了很大的改进,但对于大多数基于浏览器的用途来说仍然不够广泛。截至 2017 年 12 月 12 日,以下版本的当前版本支持它:
- Chrome(v.45+)
- 火狐(v.22+)
- 边缘(第 12 节以上)
- 歌剧(第 32 节以上)
- Android 浏览器(v. 47+)
- Opera 移动版(v. 33+)
- Android 版 Chrome(47 版以上)
- Android 版 Firefox(44+)
- Safari(v.10+)
- iOS Safari(v.10.2+)
- 三星互联网(v. 5+)
- 百度浏览器(v.7.12+)
不支持:
- IE(至第 11 节)
- Opera Mini(至 8.0 版)
- Blackberry 浏览器(至 v. 10)
- IE 移动版(至第 11 版)
- Android 版 UC 浏览器(截至 11.4 版)
- QQ(至 1.2 版)
您可以在以下位置找到更多(和最新)信息:CanIUse.com(无隶属关系)。