ES6标准新增了一种新的函数：Arrow Function（箭头函数）。为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
相当于：
1function(x){ 2 3 4 5 return x*x; 6}
箭头函数相当于匿名函数，并且简化了函数定义。
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：
1x => { 2 3 4 5 if (x > 0) { 6 7 8 9 return x * x; 10 } 11 else { 12 13 14 15 return - x * x; 16 } 17}
如果参数不是一个，就需要用括号()括起来：
1// 两个参数: 2(x, y) => x * x + y * y 3 4// 无参数: 5() => 3.14 6 7// 可变参数: 8(x, y, ...rest) => { 9 10 11 12 var i, sum = x + y; 13 for (i=0; i<rest.length; i++) { 14 15 16 17 sum += rest[i]; 18 } 19 return sum; 20}
如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
1// SyntaxError: 2x => { 3 4 5 foo: x }
因为和函数体的{ … }有语法冲突，所以要改为：
1// ok: 2x => ({ 3 4 5 foo: x })
this
箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：
1var obj = { 2 3 4 5 birth: 1990, 6 getAge: function () { 7 8 9 10 var b = this.birth; // 1990 11 var fn = function () { 12 13 14 15 return new Date().getFullYear() - this.birth; // this指向window或undefined 16 }; 17 return fn(); 18 } 19};
现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：
1var obj = { 2 3 4 5 birth: 1990, 6 getAge: function () { 7 8 9 10 var b = this.birth; // 1990 11 var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象 12 return fn(); 13 } 14}; 15obj.getAge(); // 25
更多箭头函数示例如下：
1// 空的箭头函数返回 undefined 2let empty = () => { 3 4 5 }; 6 7(() => 'foobar')(); 8// Returns "foobar" 9// (这是一个立即执行函数表达式,可参阅 'IIFE'术语表) 10 11 12var simple = a => a > 15 ? 15 : a; 13simple(16); // 15 14simple(10); // 10 15 16let max = (a, b) => a > b ? a : b; 17 18// Easy array filtering, mapping, ... 19 20var arr = [5, 6, 13, 0, 1, 18, 23]; 21 22var sum = arr.reduce((a, b) => a + b); 23// 66 24 25var even = arr.filter(v => v % 2 == 0); 26// [6, 0, 18] 27 28var double = arr.map(v => v * 2); 29// [10, 12, 26, 0, 2, 36, 46] 30 31// 更简明的promise链 32promise.then(a => { 33 34 35 36 // ... 37}).then(b => { 38 39 40 41 // ... 42}); 43 44// 无参数箭头函数在视觉上容易分析 45setTimeout( () => { 46 47 48 49 console.log('I happen sooner'); 50 setTimeout( () => { 51 52 53 54 // deeper code 55 console.log('I happen later'); 56 }, 1); 57}, 1); 58 59 60var simple = a => a > 15 ? 15 : a; 61simple(16); // 15 62simple(10); // 10 63 64let max = (a, b) => a > b ? a : b;
本文为学习笔记，如有错漏，欢迎指出！
参考：
【1】：箭头函数
【2】：内部培训资料
本文分享 CSDN - 三分恶。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。