箭头函数的有点和缺点

青旅半醒 2023-10-14 10:24 52阅读 0赞

### this题目 ###

以下代码中有几个this？

上面代码之中，只有一个this，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。

### 优缺点 ###

由于箭头函数在定义的时候被绑定，下面两个场合不应该使用箭头函数。

const cat = {
        
          lives: 9,
          jumps: () => {
        
            console.log("this是什么", this);
            this.lives--;
          },
        };
        cat.jumps();

可以发现this是window对象。

如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。

这和我们之前举的例子的不同：

在之前的例子中，箭头函数的this实际上是外层函数的this，他的外层函数是谁呢？（也就是init)的this。而init是一个普通函数，所以谁调用它，this就指向谁。所以this就是handler对象。

第二个场合是需要动态this的时候，也不应使用箭头函数。

var button = document.getElementById('button');
    button.addEventListener('click', () => {
        
     this.classList.add('on');
    });

上面代码运行时，点击按钮会报错，因为button的监听函数是一个箭头函数，箭头函数不会绑定自己的 this 值，它会捕获其所在上下文的 this 值。如果你使用箭头函数指向上一级上下文的 this，而上一层的this就是全局对象window。window没classList属性，所以自然会报错。我们希望this指向dom对象，也就是这个按钮，此时必须使用普通函数。

### 优点 ###

在函数有多重嵌套时，可以使得函数简洁易懂

如果用箭头函数改写：

### 其他特性 ###

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。

function foo() {
        
      setTimeout(() => {
        
        console.log('args:', arguments);
      }, 100);
    }
    foo(2, 4, 6, 8)
    // args: [2, 4, 6, 8]

上面代码中，箭头函数内部的变量arguments，其实是函数foo的arguments变量。

### super的作用 ###

在 JavaScript 中，super 是一个关键字，用于在子类中调用父类的方法或访问父类的属性。它主要用于继承和类之间的关系，使子类能够重用和扩展父类的功能。

在使用 super 时，通常有两个主要用途：

调用父类的构造函数：在子类的构造函数中使用 super() 可以调用父类的构造函数，从而初始化父类的属性。这是确保子类实例拥有父类属性的一种方式。

访问父类的方法：在子类的方法中，可以使用 super 关键字调用父类中的同名方法，以便在子类中扩展父类的方法。

以下是 super 关键字的两种用法的示例：

1.调用父类的构造函数：

class Animal {
        
      constructor(name) {
        
        this.name = name;
      }
    
      makeSound() {
        
        console.log("Some generic sound");
      }
    }
    
    class Dog extends Animal {
        
      constructor(name, breed) {
        
        super(name); // 调用父类的构造函数来初始化父类属性
        this.breed = breed;
      }
    
      makeSound() {
        
        super.makeSound(); // 调用父类的方法
        console.log("Woof! Woof!");
      }
    }
    
    const myDog = new Dog("Buddy", "Golden Retriever");
    console.log(myDog.name); // 输出: Buddy
    console.log(myDog.breed); // 输出: Golden Retriever
    myDog.makeSound(); // 输出: Some generic sound   Woof! Woof!

在上面的例子中，Dog 是 Animal 的子类。在 Dog 类的构造函数中，使用 super(name) 来调用父类 Animal 的构造函数，确保在创建 Dog 实例时会初始化 name 属性。在 Dog 类的 makeSound() 方法中，使用 super.makeSound() 来调用父类 Animal 的 makeSound() 方法，以便在子类中扩展父类的功能。

2.访问父类方法

class Vehicle {
        
      constructor(type) {
        
        this.type = type;
      }
    
      start() {
        
        console.log(`Starting ${
          this.type}`);
      }
    }
    
    class Car extends Vehicle {
        
      constructor(type, brand) {
        
        super(type);
        this.brand = brand;
      }
    
      start() {
        
        super.start(); // 调用父类的方法
        console.log(`Driving the ${
          this.brand} car`);
      }
    }
    
    const myCar = new Car("car", "Toyota");
    myCar.start(); // 输出: Starting car   Driving the Toyota car

在上面的例子中，Car 是 Vehicle 的子类。在 Car 类的 start() 方法中，使用 super.start() 来调用父类 Vehicle 的 start() 方法，以便在子类中扩展父类的方法。

总结：super 是用于在 JavaScript 类中访问和调用父类方法和构造函数的关键字，它在继承和类之间的关系中起着重要的作用。

如果不用super会放生什么？  
https://www.imqianduan.com/javascript/405.html

**什么是 new.target？**

https://blog.csdn.net/Hoshizola/article/details/119462690