箭头函数
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]