今天我们来分析一下箭头函数的使用场景,工作中使用箭头函数给我们带来了极大的便利,但并不是所有场景下都可以使用箭头函数,下面让我们来深入了解一下.
箭头函数有什么缺点?
- 没有arguments对象,如果要用的话,可以使用rest参数代替。例:
const f1 = () => {
console.log("arguemnts", arguments);
};
f1(100, 200);
function f2() {
console.log("arguments", arguments);
}
fn2(100, 200);
const fn3=(...values)=>{
console.log('values',values)
}
将依此打印出
2.无法通过apply、call、bind改变this指向。
改变箭头函数的指向时
改变普通函数的指向时
如上图所示,我们可以发现,箭头函数的两次this都是指向了window,使用call并没有发生变化,而普通函数第一次指向了window,第二次则是指向了我们传入的对象。
什么时候不能使用箭头函数?
1、在对象中不适合用箭头函数
const obj={
name:'张三',
getName(){
return this.name
},
getName1:()=>{
return this.name
}
}
console.log("普通函数",obj.getName())
console.log("箭头函数",obj.getName1())
打印出来将会是意想不到的结果
我们可以发现箭头函数好像并没有获取到值!
这里要注意的是箭头函数中的this指向的是定义时所在的对象,而不是使用时所在的对象,换句话说就是箭头函数没有自己的this。
obj.getName()
中this
指向函数的调用者,也就是obj这个对象,因此this.name='张三'
。
getName1()
通过箭头函数定义,而箭头函数是没有自己的this
,会继承父级作用域的this
。因此obj.getName1()
在执行时,此时的作用域指向window
,而window
中没有定义name
属性,所以会报空。
由此可见,在对象中使用箭头函数是不合适的。
2、原型方法中不适合用箭头函数
const obj={
name:'张三',
}
obj.__proto__.getName=function(){
return this.name;
}
obj.__proto__.getName1=()=>{
return this.name;
}
console.log("普通函数",obj.getName())
console.log("箭头函数",obj.getName1())
结果跟上面的结果一样,因为原型也是一个对象~
3、构造函数里也不适合用构造函数
function Foo(name,sex){
this.name=name;
this.sex=sex;
}
const Foo1=(name,sex)=>{
this.name=name;
this.sex=sex;
}
console.log("普通的构造函数",new Foo('张三','男'))
console.log("箭头函数",new Foo1('张三','男'))
构造函数是通过new关键字来生成对象实例的,生成实例对象的过程也是通过构造函数给实例绑定this的过程,而箭头函数没有自己的this,因此不能使用箭头函数作为构造函数,也就不能通过new操作符来调用箭头函数。 3、动态上下文中的回调函数
比如,我们要给一个按钮添加点击事件:
const btn=document.getElementsByTagName("button")[0]
btn.addEventListener("click",()=>{
this.innerHTML='Click me !'
})
如果我们要在回调函数里用到this,那将会获取不到this。因为箭头函数的this指向的是它的父级作用域(这里指向了window),而不是指向这个button,这时候就需要用普通函数才可以。
4、Vue的生命周期和method中也不能使用箭头函数
Vue本质上也是一个对象,我们说过对象中不适用箭头函数,所以它跟对象不适用箭头函数是一样的。
The end !