const hello = (name) => { return 'Hello ' + name; }; hello('World'); // => 'Hello World' // Keep only even numbers [1, 2, 5, 6].filter(item => item % 2 === 0); // => [2, 6]
箭头函数语法简单，没有冗长的function 关键字。当箭头函数只有一条语句时，甚至可以省略return关键字。
箭头函数是匿名的，这意味着name属性是一个空字符串''。这样它就没有词法上函数名(函数名对于递归、分离事件处理程序非常有用)
同时，跟常规函数相反，它也不提供arguments对象。但是，这在ES6中通过rest parameters修复了:
const sumArguments = (...args) => { console.log(typeof arguments); // => 'undefined' return args.reduce((result, item) => result + item); }; sumArguments.name // => '' sumArguments(5, 5, 6); // => 16
7.1. 箭头函数中的this
this 定义箭头函数的封闭上下文箭头函数不会创建自己的执行上下文，而是从定义它的外部函数中获取 this。 换句话说，箭头函数在词汇上绑定 this。
下面的例子说明了这个上下文透明的特性：
class Point { constructor(x, y) { this.x = x; this.y = y; } log() { console.log(this === myPoint); // => true setTimeout(()=> { console.log(this === myPoint); // => true console.log(this.x + ':' + this.y); // => '95:165' }, 1000); } } const myPoint = new Point(95, 165); myPoint.log();
setTimeout使用与log()方法相同的上下文(myPoint对象)调用箭头函数。正如所见，箭头函数从定义它的函数继承上下文。
如果在这个例子里尝试用常规函数,它创建自己的上下文(window或严格模式下的undefined)。因此，要使相同的代码正确地使用函数表达式，需要手动绑定上下文:setTimeout(function(){…}.bind(this))。这很冗长，使用箭头函数是一种更简洁、更短的解决方案。
如果箭头函数在最顶层的作用域中定义（在任何函数之外），则上下文始终是全局对象（浏览器中的 window）：
onst getContext = () => { console.log(this === window); // => true return this; }; console.log(getContext() === window); // => true
箭头函数一劳永逸地与词汇上下文绑定。 即使修改上下文，this也不能被改变：
const numbers = [1, 2]; (function() { const get = () => { console.log(this === numbers); // => true return this; }; console.log(this === numbers); // => true get(); // => [1, 2] // Use arrow function with .apply() and .call() get.call([0]); // => [1, 2] get.apply([0]); // => [1, 2] // Bind get.bind([0])(); // => [1, 2] }).call(numbers);
无论如何调用箭头函数get，它总是保留词汇上下文numbers。 用其他上下文的隐式调用(通过 get.call([0])或get.apply([0]))或者重新绑定(通过.bind())都不会起作用。
箭头函数不能用作构造函数。 将它作为构造函数调用(new get())会抛出一个错误：TypeError: get is not a constructor。
7.2. 陷阱: 用箭头函数定义方法
你可能希望使用箭头函数来声明一个对象上的方法。箭头函数的定义相比于函数表达式短得多：(param) => {...} instead of function(param) {..}。
来看看例子，用箭头函数在Period类上定义了format()方法：
function Period (hours, minutes) { this.hours = hours; this.minutes = minutes; } Period.prototype.format = () => { console.log(this === window); // => true return this.hours + ' hours and ' + this.minutes + ' minutes'; }; const walkPeriod = new Period(2, 30); walkPeriod.format(); // => 'undefined hours and undefined minutes'
由于format是一个箭头函数，并且在全局上下文（最顶层的作用域）中定义，因此 this 指向window对象。
即使format作为方法在一个对象上被调用如walkPeriod.format()，window仍然是这次调用的上下文。之所以会这样是因为箭头函数有静态的上下文，并不会随着调用方式的改变而改变。
该方法返回'undefined hours和undefined minutes'，这不是咱们想要的结果。
函数表达式解决了这个问题，因为常规函数确实能根据实际调用改变它的上下文：
function Period (hours, minutes) { this.hours = hours; this.minutes = minutes; } Period.prototype.format = function() { console.log(this === walkPeriod); // => true return this.hours + ' hours and ' + this.minutes + ' minutes'; }; const walkPeriod = new Period(2, 30); walkPeriod.format(); // => '2 hours and 30 minutes'