一、箭头函数
(1)简明的语法如下:
const numbers=[1,2,3,4,5];
const double=numbers.map(function(number){
return number*2
})
console.log(double);
// [2, 4, 6, 8, 10]
使用箭头函数改写:
let numbers1=[1,2,3,4,5];
let double1=numbers.map((number)=>{
return number*2
})
console.log(double1);
//[2, 4, 6, 8, 10]
注意箭头函数的语法是去掉之前的function,没有参数或者多个参数时需要加括号(),多个参数时使用逗号分隔,一个参数时括号可以省略。
(2)隐式返回,如 下面的代码可以去掉return,代码移到一行,减少代码量。
let numbers1=[1,2,3,4,5];
let double1=numbers.map((number)=>number*2)
console.log(double1);
//[2, 4, 6, 8, 10]
(3)解决了this的指向问题,原生的写法this指向的是调用者,箭头函数this绑定的是定义时的那个对象。
箭头函数的this绑定看的是this所在的函数定义在哪个对象下,绑定到哪个对象则this就指向哪个对象
如果有对象嵌套的情况,则this绑定到最近的一层对象上。
//定义一个对象
var obj = {
x:100,
//属性x
show(){
//延迟500毫秒,输出x的值
setTimeout( //匿名函数 function(){console.log(this.x);}, 500 );
}
};
obj.show();//打印结果:undefined
为什么结果打印是undefined呢,问题出在了this上,当代码执行到了setTimeout( )的时候,此时的this已经变成了window对象(setTimeout( )是window对象的方法),已经不再是obj对象了,所以我们用this.x获取的时候,获取的不是obj.x的值,而是window.x的值,再加上window上没有定义属性x,所以得到的结果就是:undefined。
使用箭头函数:
//定义一个对象
var obj = {
x:100,//属性x
show(){
//延迟500毫秒,输出x的值
setTimeout(
//不同处:箭头函数
() => { console.log(this.x)},
500
);
}
};
obj.show();//打印结果:100
当定义obj的show( )方法的时候,我们在箭头函数编写this.x,此时的this是指的obj,所以this.x指的是obj.x。而在show()被调用的时候,this依然指向的是被定义时候所指向的对象,也就是obj对象,故打印出:100。
那么总结下什么时候我们不能使用箭头函数:
(1)做为构造函数的时候不能使用箭头函数
(2)真正需要this的时候如给元素绑定click事件的 时候,执行的回调函数不能使用箭头函数。
(3)我们需要使用arguments对象的时候不能使箭头函数。箭头函数中没有arguments对象。