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

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

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

// ES5
array.filter(function(ele){
	return ele - 100;
});
// ES6
array.filter(ele => ele-100);

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

// ES5
array.reduce(function(a, b){
	return a + b;
},0);
// ES6
array.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,我们以前可能写过这样的hack
var 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(); //1134
obj.output.call(obj); //1134,仍然指向外围作用域

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