ES6学习之路6----箭头函数

什么是箭头函数

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

ES5:var add = function(param){console.log(param);}add(9);//9ES6:let add = param => console.log(param);add(9);//9

1.如果箭头函数只有一句话并且返回值

ES5：var sum = function(a,b){return a + b;}sum(1,2);//3ES6:let sum0 = (a,b) => a + b;sum0(2,3);//5

2.如果箭头函数有多条执行语句

ES5：var sum = function(a,b){    console.log(a);    console.log(b);    return a + b;}sum(1,2);//1 2 3ES6:let sum0 = (a,b) => {    console.log(a);    console.log(b);    return a + b;};sum0(2,3);//2 3 5

注意：由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，会报错。

let obj = () => {key:0,value:1};obj();//Uncaught SyntaxError: Unexpected token :

解决方案：在对象外面加上圆括号

let obj = () => ({key:0,value:1});obj();//{key:0,value:1}

注意:() => {}在谷歌浏览器不会报错，会解释为代码块中没执行语句。

let obj = () => {};obj();//let obj0 = () => ({});obj0();//{}

3.this 的指向问题

ES5:var obj0 = {a:0,b:2};var obj = function(){    var self = this;    console.log(this);    var add = function(){        console.log(this);        console.log(self);    }    add();}obj.bind(obj0)();//{a: 0, b: 2} window {a: 0, b: 2}ES6:let obj0 = {a:0,b:0}let obj = () =>{    let self = this;    console.log(this);    let add = () => {        console.log(this);        console.log(self);    }    add();}obj.bind(obj0)();// window window window 

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。

4.箭头函数不能当做构造函数

let Add = () => {};let a = new Add();a();//Uncaught TypeError: Add is not a constructor

由于箭头函数没有this，所以也就不能用作构造函数。

5.箭头函数没有arguments对象

ES5:var add = function(a,b){console.log(arguments);}add(1,2);//[1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]ES6:let sum = (a,b) => console.log(arguments);sum(1,2);//Uncaught ReferenceError: arguments is not defined

解决方案：rest参数

ES6:let sum = (...rest) => console.log(rest);sum(1,2);//[1, 2]

总结：

1. 当箭头函数只有一行表达式返回的是对象时，需要用圆括号。
2. 箭头函数没有自己的this，内部的this就是外层代码块的this。
3. 由于没有自己的this，所以不能使用apply，call，bind方法改变箭头函数的this指向。
4. 由于没有自己的this，所以不能当做构造函数。
5. 箭头函数没有arguments对象，可以使用rest参数代替。