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

什么是箭头函数

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

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

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

ES5：
var sum = function(a,b){return a + b;}
sum(1,2);//3
ES6:
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 3
ES6:
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参数代替。

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表