ES6新特新之箭头函数使用细节

<=这个大家都知道是小于等于，那么=>是什么呢？今天我们就来探究一下ES6的新特新-----胖箭头函数。

其他语言的函数定义都是很简洁的，但是为什么javaScript的就那么复杂呢？还必须带function关键字，这是一直令我很困惑的一个问题，还好ES6为我们解了这个问题，它定义的箭头函数不仅省略了function和return，甚至连一些小括号，大括号和分号都省略了，这种极简主义风格简直美不可言。

// ES5array.filter(function(ele){return ele - 100;});// ES6array.filter(ele => ele-100);

箭头函数也可以接收多个参数，或者没有参数，或者是不定参数，默认参数，解构参数，这时需要要（）将参数列表扩起来。

// ES5array.reduce(function(a, b){return a + b;},0);// ES6array.reduce((a,b) => a + b, 0);// 没有参数setTimeout(() => {alert("dog")},1000);

如果函数体有多条语句，可也用{}扩起来，注意这时语句块不会自动返回值，需要使用return。

array.reduce((a,b) =>{a++;return a + b;} , 0);

当要使用箭头函数创建对象的时候，需要将对象包括在()里，因为它会将这里的{}解析成语句块。

var chewToys = puppies.map(puppy => {}); // 这样写会报Bug！var chewToys = puppies.map(puppy => ({})); //

胖箭头函数this的使用

胖箭头函数没有constructor方法，也没有prototype，所以不支持new操作。

它也没有自己的this值，箭头函数的this值继承自外围作用域。

// ES5,我们以前可能写过这样的hackvar obj = {eatInTime:function(){var self = this; setTimeout(function(){self.eat();},1000);},eat:function(){console.log("eat");}};// ES6，现在我们可以这样简写var obj = {eatInTime:function(){setTimeout(() => this.eat(),1000);},eat:function(){console.log("eat");}};

特别需要注意的一点是外围作用域，当我们用箭头函数定义方法的时候。

var i = 1134;var obj = {i: 123,output:() => console.log(this.i)};obj.output();//1134，指向外围作用域var i = 1134;var obj = {i: 123,output:function(){console.log(this.i);}};obj.output();//123，指向对象本身

箭头函数的this值还是在定义时候指定的，而不是在执行时指定的，甚至我们不能通过call和apply改变这个事实。

var i = 1134;var obj = {i: 123,output:() => console.log(this.i)};obj.output(); //1134obj.output.call(obj); //1134,仍然指向外围作用域

以上就是ES6箭头函数使用要注意的地方。