ES6 箭头函数用法和案例

前言

ES6 提供了一种很简化的写方法的新写法。就是箭头函数。有了箭头函数，可以更加优化代码的长度，也可以使代码读起来更加好看，增加可读性。但箭头函数和方法构造是由点区别，现在总结了用法和注意事项。请大家阅读学习用。

基本用法

带一个参数

／／ES6
var f = v => v;

／／ES5
var f = function(v){
    return v;
}

---

带多参数

//ES6
var f = (x,y) => x+y;

//ES5
var f = function(x,y){
    return x+y;
}

---

不带参数

//ES6
var f = () => 5;

//ES5
var f = function(){
    return 5;
}

---

带变量参数

//ES6
var obj = {x:1,y:2};
var f = (obj) => x + y;

//ES5
var obj = {x:1,y:2};
var f = function(obj){
    return obj.x+obj.y;
}

案例

数组案例

//ES6
[1,2,3].map(x => x);

//ES5
[1,2,3].map(function(x){
    return x;
})

---

settimeout案例

//ES6
setTimeout(x=>{return x;},1000)

//ES5
setTimeout(function(x){
    return x;
},1000)

---

rest参数案例

//ES6
var f = (...arr) => arr;

f(1,2,3,4,5)
//[1,2,3,4,5]

注意事项

1. 函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。
2. 不可以当作构造函数。也就是说，不可以使用new命令，否则会抛出一个错误。
3. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替。
4. 不可以使用yield命令，因此箭头函数不用做Generator函数。

重点说下第一点：

var o = {
    init : function(){
        document.addEventListener("click",event=>this.renter(event.type),false)
    },
    renter:function(){
        console.log("o")
    }
}

按以前ES5，this在click事件里面，this应该指向click。但使用箭头函数的话this指向o对象。