什么时候不能使用箭头函数?

93 阅读3分钟

今天我们来分析一下箭头函数的使用场景,工作中使用箭头函数给我们带来了极大的便利,但并不是所有场景下都可以使用箭头函数,下面让我们来深入了解一下.

箭头函数有什么缺点?
  1. 没有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)
    }

将依此打印出

1656807717936.png

1656807794430.png

1656807906375.png 2.无法通过apply、call、bind改变this指向。

改变箭头函数的指向时

1656808188814.png 改变普通函数的指向时

1656808343451.png 如上图所示,我们可以发现,箭头函数的两次this都是指向了window,使用call并没有发生变化,而普通函数第一次指向了window,第二次则是指向了我们传入的对象。

什么时候不能使用箭头函数?

1、在对象中不适合用箭头函数

     const obj={
        name:'张三',
        getName(){
          return this.name
        },
        getName1:()=>{
          return this.name
        }
      }
      console.log("普通函数",obj.getName())
      console.log("箭头函数",obj.getName1())

打印出来将会是意想不到的结果

1656808958821.png

我们可以发现箭头函数好像并没有获取到值!

这里要注意的是箭头函数中的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('张三','男'))

1656810476370.png

构造函数是通过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中也不能使用箭头函数

e6d0494306d2ddf13ad4a2534e20983f.jpg Vue本质上也是一个对象,我们说过对象中不适用箭头函数,所以它跟对象不适用箭头函数是一样的。

The end !