ES6学习笔记之ES6中函数的新特性

一箭头函数

ES6 允许使用“箭头”（=>）定义函数：
注意：

1. => 是一个完整的运算符，不能拆开 = >
2. 箭头函数一定是匿名函数，要使用“=”赋值接收某一个匿名的箭头函数，来给这个匿名的箭头函数命名。函数的扩展

1【function的基本简化】
之前定义函数要写function关键字：

const sum = function(a , b){
    return a + b;
}

现在用箭头简化函数的定义：

const sum = (a , b) => {
    return a + b;
}

这个就是箭头函数，非常的优雅，一看就知道这个函数，接收a、b两个参数，返回a+b。

2【return和{}、()都可以简化】
上面的函数等价于：

const sum = (a,b)=> a + b;
console.log(sum(4,5));

如果箭头函数中，只有一条return语句，此时可以简化{}
言外之意，如果语句不止一条，必须加大括号{}和return语句

3. 如果箭头函数形参变量中，只有一个参数，可以不写形参变量的“()”圆括号

const mianji = r => 3.14 * r * r;
console.log(mianji(10)); //314

4.如果箭头函数不需要参数，就使用一个圆括号代表参数部分

const f = () => 5;
//等价于：
const f = function(){
return 5;
}

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错

// const fun = (id,name) => {"id":id,"name":name}   //报错
const fun = (id,name) => ({"id":id,"name":name}); //不报错
console.log(fun(1001,"小明"));

5.可以连续写箭头，表示函数的嵌套，外层的函数返回了一个函数

const fun = (a) => b => a + b;
console.log(fun(3)(4));

//等价于：
function fun(a){
    return function(b){
        return a + b;
    }
}

注意：箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是调用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的

6.函数的剩余参数
ES6引入rest参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了，rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
箭头函数与普通函数引用，也可以使用ES6的默认和剩余参数。

const fun = (a,...args) => args;
console.log(fun(1,2,3,4,5,6,7,8)); //[ 2, 3, 4, 5, 6, 7, 8 ]

7.函数的默认参数
ES6允许为函数的参数设置默认参数，即直接写在参数定义的后面。

const sum = (a,b = 10) => a + b;
console.log(sum(1,2)); //3
console.log(sum(5)); //15

在函数的形参中b赋值了默认参数10，表示若调用的时候没有传入b的值，此时使用默认参数10。

箭头函数的上下文是什么规则呢？

箭头函数的上下文，是这个函数的定义时所处的上下文，而不是看如何调用的。
箭头函数定义时所处的函数内的this是谁，这个箭头函数的this终身是谁，不能被改变。

题目1：应用场景，之前定时器经常要进行备份，现在有箭头函数就不需要备份了：

var obj = {
    a : 10,
    fn:function(){
        setInterval(()=>{
            console.log(this.a)
        },1000);   
    }
}
obj.fn();

fn:function()这个函数的上下文是obj，此时箭头函数的上下文就是继承于obj对象，而不是window。