前言
最近学习了慕课网上的vue仿饿了吗的视频，体会到了es6的箭头函数的妙用，因此特别总结了一下箭头函数的用法。
首先看一下es6的箭头函数语法
<pre>
([param] [, param]) => {
statements
}
param => expression
</pre>
aram 是参数，根据参数个数不同，分这几种情况：
1, () => { … } // 零个参数用或多个参数 () 表示且()不能省略；
2, x => { … } // 一个参数可以省略 ()；
看第一种情况
<pre>
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
</pre>
第二种情况
<pre>
var f = v => v;
上面箭头函数等价于
var f = function(v) {
return v;
};
</pre>
当然=>后面也不一定非得接return 之后的语句，看下面：
<pre>
// ES5
$("#confetti-btn").click(function (event) {
playTrumpet();
fireConfettiCannon();
});
// ES6
$("#confetti-btn").click(event => {
playTrumpet();
fireConfettiCannon();
});</pre>
但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。
和普通函数一样，箭头函数也可以使用剩余参数和 默认参数。
<pre>
var func1 = (x = 1, y = 2) => x + y;
func1(); // 得到 3
var func2 = (x, ...args) => { console.log(args) };
func2(1,2,3); // 输出 [2, 3] </pre>
使用注意点
函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
不可以使用yield命令，因此箭头函数不能用作Generator函数。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this，而非执行时。我们通过一个例子来理解:
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.func();
}, 100);
}
};
o.test(); // TypeError : this.func is not a function
上面的代码会出现错误，因为this的指向从o变为了全局（函数调用中的this都是指向全局的）。如果大家对JavaScript中的this不是很熟悉的话，可以看看我写过的一篇文章，深入理解javascript之this。好了，回归正题，我们需要修改上面的代码如下：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.func();
}, 100);
}
};
o.test();
通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的 this 始终指向函数定义时的 this，而非执行时。所以我们将上面的代码修改如下：
var o = {
x : 1,
func : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.func() }, 100);
}
};
o.test();
我们还需要注意一点的就是这个this是不会改变指向对象的，我们知道call和apply可以改变this的指向，但是在箭头函数中是无效的。
var x = 1,
o = {
x : 10,
test : () => this.x
};
o.test(); // 1
o.test.call(o); // 依然是1
