ES6 箭头函数用法和案例

前言

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

基本用法

带一个参数

／／ES6var f = v => v;／／ES5var f = function(v){    return v;}

---

带多参数

//ES6var f = (x,y) => x+y;//ES5var f = function(x,y){    return x+y;}

---

不带参数

//ES6var f = () => 5;//ES5var f = function(){    return 5;}

---

带变量参数

//ES6var obj = {x:1,y:2};var f = (obj) => x + y;//ES5var 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案例

//ES6setTimeout(x=>{return x;},1000)//ES5setTimeout(function(x){    return x;},1000)

---

rest参数案例

//ES6var 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对象。