es6箭头函数

前言

最近学习了慕课网上的vue仿饿了吗的视频，体会到了es6的箭头函数的妙用，因此特别总结了一下箭头函数的用法。

首先看一下es6的箭头函数语法

 ([param] [, param]) => {
 statements
 }
 param => expression
 

aram 是参数，根据参数个数不同，分这几种情况：
1, () => { … } // 零个参数用或多个参数 () 表示且()不能省略；
2, x => { … } // 一个参数可以省略 ()；

看第一种情况

 var f = () => 5;
 // 等同于
 var f = function () { return 5 };
 var sum = (num1, num2) => num1 + num2;
 // 等同于
 var sum = function(num1, num2) {
 return num1 + num2;
 };
 

第二种情况

 var f = v => v;
 上面箭头函数等价于
 var f = function(v) {
 return v;
 };
 

当然=>后面也不一定非得接return 之后的语句，看下面：

 // ES5
 $("#confetti-btn").click(function (event) {
 playTrumpet();
 fireConfettiCannon();
 });
 // ES6
 $("#confetti-btn").click(event => {
 playTrumpet();
 fireConfettiCannon();
 });

但是需要注意的是，多行语句需要用{}括起来，单行表达式不需要{}，并且会作为函数返回值。

和普通函数一样，箭头函数也可以使用剩余参数和 默认参数。

 var func1 = (x = 1, y = 2) => x + y;
 func1(); // 得到 3
 
 
var func2 = (x, ...args) => { console.log(args) };
 func2(1,2,3); // 输出 [2, 3] 

---

使用注意点

• 函数体内的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