es6函数的扩展—箭头函数

箭头函数

1.普通函数：

function fn(){
	console.log("我是一个函数")；
}
fn()；

函数表达式：

var fn = function(){
	console.log("我是函数表达式")；
}
fn();

2.箭头函数：

①

var fn_arrow = () =>{
	console.log("我是一个箭头函数");
}
fn_arrow();//我是一个箭头函数

②
带参数的箭头函数：

var fn_arrow = (a,b) =>{
	console.log(a+b);
}
fn_arrow(2,3);//5

箭头左边是形参列表，右边是函数体；
当该箭头函数只有一个形参时，小括号可以省略：

var fn_arrow = msg =>{
console.log(msg);
}
fn_arrow("形参一个，小括号省略了");//形参一个，小括号省略了

③
函数体省略：

var a = 10;
var fn_arrow = () => a;  //10；
//函数体省略，箭头函数返回的内容是变量a

var fn_arrow = () => [1,2,3];//返回数组

var fn_arrow = () => 1+10;//返回表达式运算结果

var fn_arrow = () =>(
{name:'小花'}
);
console.log(fn_arrow());//{name : '小花‘’}
//函数体省略，当返回的内容是对象，注意对象外的圆括号！

普通函数和箭头函数的this指向：

this：执行函数时，函数的拥有者
1.全局下，this指的是window；
2.普通函数下，this指的是window；
3.定时器中，this指的是window；
4.对象的方法内部，this指的是对象本身；
5.事件处理函数中，this指的是触发事件的对象；

箭头函数的this指向：
箭头函数内部的this不绑定当前的调用者，只与它的上下文有关（定义时的作用域环境）；

let fn = () =>{
	console.log(this);  //window  箭头函数定义时是全局
	setTimeout(function(){
		console.log(this); //window   定时器中this
	},1000)
}
fn();    //window window

箭头函数不适用场景：

①对象中使用箭头函数：
普通函数：

var obj = {
	name:'小花',
	age:18,
	sayHi:function(){
		console.log(`嗨，我是${this.name}，我今年${this.age}岁了`);
	}
}
obj.sayHi();//嗨，我是小花，我今年18岁了

箭头函数：因为this指向定义环境，window，所以箭头函数内部this.name不成立。
②事件的回调方法；依旧是this的指向问题。

剩余参数：

arguments：是函数中用来接收实参的对象，可以获取参数的长度，也可以通过下表获取参数。

因为箭头函数内部不绑定arguments，ES6推荐使用rest(…)剩余参数运算符来解决，这个剩余参数运算符一定要放在形参列表的尾部。

let fn = (a,...args)=>{
	console.log(args);
};
fn(1,2,3,4); // [2, 3, 4]