Es6新特性之箭头函数

箭头函数

基本语法

(x,y)=>{
    ...函数体

}

//es6
let res = (x,y)=>{
	console.log(x,y)
}
res(2,3);

//es5
let res2 = function(x,y){
	console.log(x,y)

}
res2(2,3)

上面两种输出的结果是相等的，箭头函数相对于es6之前的function更加简洁，除了简洁这一点，箭头函数还有一个很重要的特性，箭头函数内部的this是由上下文决定的，什么意思？
看下示例

let person = {
	name:'tz',
	sex:'m',
	age:14,
	show:function(){
 			console.log(this.sex);
	}
}
person.show();//m

正常调用对象方法返回m
此时给show方法加上一个定时器的话

show:function(){
		setTimeout(function(){
 			console.log(this.sex);
		}, 2000)
		
	}
person.show();//undefind

结果返回undefind，设置因为普通函数会改变this指向的问题，我们在打印this看是否是这样

show:function(){
		console.log(this)
		setTimeout(function(){
		     console.log(this)
 			console.log(this.sex);
		}, 2000)	
	}
person.show();//undefind

可以看到this由person变成了window所以最后结果是undefind

没有接触Es6之前我们或许会这样解决this指向的问题

show:function(){
		console.log(this)
		var that = this
		setTimeout(function(){
		     console.log(that)
 			console.log(that.sex);
		}, 2000)	
	}

我们通过this保留了上一步的this结果正常输出

而在es6你只需要将function变成“=>”即可

show:function(){
		console.log(this)
		// var that = this
		setTimeout(()=>{
		     console.log(this)
 			console.log(this.sex);
		}, 2000)	
	}

箭头函数语法
基本

(args)=>{
  //函数体
}

括号代表要传递的参数 =>后面代表函数的执行体
如果参数只有一个是可以省略括号的

args=>{
}

没有参数时必须加括号

()=>{
  //函数体
}

当函数体只有一行语句并且为return时可以省略{}
如

//省略写法
let res = (x,y)=>x+y;

//正常写法
let res2 = (x,y)=>{
	return x+y;
}
console.log(res(2,3));//5
console.log(res2(2,3));//5