深入浅出es6之箭头函数

es6的函数

es6函数的几个新特性：

• 可以设置参数默认值
• 可以结合解构赋值默认值使用
• 利用rest（…变量名）传入任意参数

… rest和扩展运算符

rest参数（…变量名），用于获取函数的多余参数，rest参数搭配的变量是一个数组，该变量将多余的参数放入其中。

1. 利用rest（…变量名）传入任意参数

    var x = 1;

    function foo(...y) {
        console.log(y)  //[1,2,3,4]
        console.log(arguments) //{ '0': 1, '1': 2, '2': 3, '3': 4 }
        var x = 2;
        setTimeout(function() {
            console.log(x)
        }, 1000)
    }
    foo(1, 2, 3, 4)

rest和arguments有点相似，区别在于：
1、箭头函数不能使用arguments
2、rest返回的数组，arguments是类数组
3、rest参数后不能有其他的参数

2. 利用扩展运算符（…数组）替代数组的apply方法

在es5中，需要用apply将数组转化为函数参数，如下

     function f(x, y, z) {
        console.log(x + ' ' + y + ' ' + z);
    }
    var args = [1, 2, 3];
    f.apply(null, args)

在es6中就不需要这种方式了，可以使用…来代替

    function f(x, y, z) {
        console.log(x + ' ' + y + ' ' + z);
    }
    var args = [1, 2, 3];
    // f.apply(null, args)
    f(...args)

另一个例子

    var arr1 = [0, 1, 2]
    var arr2 = [3, 4, 5]
    var arr3 = arr1.concat(arr2)
    console.log(arr3) //[ 0, 1, 2, 3, 4, 5 ]

    var arr4 = arr1.push(arr2)
    console.log(arr1) //[ 0, 1, 2, [ 3, 4, 5 ] ]

这里我们想通过arr1.push(arr2)，发现失败了，最后仅仅是最后一个元素变成了数组。

如果想使用arr1.push方法的话，就需要用apply传arr2了

    var arr4 = Array.prototype.push.apply(arr1, arr2) //[ 0, 1, 2, 3, 4, 5 ]

但是如果使用扩展运算符的话，就简单一些了

  var arr4 = arr1.push(...arr2)

原理很简单，因为扩展运算符可以把数组转化为逗号分割的参数。

扩展运算的用法：

1. 合并数组
2. 与解构赋值结合
3. 分割字符串

… name属性

函数的name属性可以返回函数名

箭头函数

特性1：this总是指向函数所在的对象

function foo() {
    setTimeout(() => {
        console.log("id", this.id) //id 42
    }, 100)
}

function foo2() {
    setTimeout(function() {
        console.log("id:", this.id) //id: undefined
    }, 100)
}

foo2是普通函数，setTimeout里面的普通函数this指向全局对象；
foo1是箭头函数，setTimeout里的箭头函数的this指向当前对象；

说明：箭头函数this的固定化并不是因为剪头函数内部有this指针，而正是因为它没有this指针，所以，内部的this就指向外层代码块的this。
所以，箭头函数不能用作构造函数
除了this，arguments、super和new.target也是不存在的，它们都指向外层函数的这些属性