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