JavaScript的static、this、super关键字介绍

static关键字：

☆ static关键字用于定义类的静态方法和静态属性。

☆ 静态方法是直接与类相关联的方法，不需要实例化类即可调用。

☆ 静态属性是类本身的属性，而不是实例的属性。

☆ 在静态方法内部，不能使用this关键字来引用实例，因为静态方法与特定实例无关。

this关键字：

☆ this关键字指向当前执行代码的对象，它是动态的，根据上下文的不同而变化。

☆ 在类的方法中，this指向调用该方法的实例对象。

☆ 在箭头函数中，this指向定义该函数时的词法环境的this值，而不是动态绑定到实例对象。

☆ 在构造函数中使用this关键字来设置实例的属性。

super关键字：

☆ super关键字用于调用父类的构造函数和方法。

☆ 在子类的构造函数中，可以使用super()来调用父类的构造函数，完成父类的初始化。

☆ 在子类的方法中，可以使用super.method()来调用父类的方法。

☆ 在子类中，通过super关键字可以访问到父类的属性和方法。

static关键字

当在JavaScript中使用static关键字时，可以定义静态方法和静态属性。下面是一些示例来说明如何使用static关键字。

1.定义静态方法：

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtils.add(2, 3)); // 输出: 5
console.log(MathUtils.multiply(2, 3)); // 输出: 6

在上面的示例中，MathUtils类定义了两个静态方法：add()和multiply()。这些方法可以直接通过类名调用，而不需要实例化类。

2.定义静态属性：

class Circle {
  static PI = 3.14;

  constructor(radius) {
    this.radius = radius;
  }

  get circumference() {
    return 2 * Circle.PI * this.radius;
  }
}

const circle = new Circle(5);
console.log(circle.circumference); // 输出: 31.4
console.log(Circle.PI); // 输出: 3.14

在上面的示例中，Circle类定义了一个静态属性PI，它存储了圆周率的值。在实例方法circumference()中，可以通过Circle.PI来访问静态属性。

需要注意的是，在静态方法内部，不能使用this关键字，因为静态方法与特定实例无关。静态方法只能访问静态属性或调用其他静态方法。

通过使用static关键字，我们可以在JavaScript中创建更具灵活性和可重用性的代码结构。

this关键字

在JavaScript中，this关键字用于指向当前执行代码的对象。下面是一些示例来说明如何使用this关键字。

1.在方法中使用this：

const person = {
  name: 'John',
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

person.greet(); // 输出: Hello, my name is John.

在上面的示例中，this关键字指向包含这个方法的对象person。通过this.name，我们可以访问到对象的属性。

2.在构造函数中使用this：

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const rectangle = new Rectangle(5, 3);
console.log(rectangle.getArea()); // 输出: 15

在上面的示例中，构造函数Rectangle使用this来设置实例的属性width和height。在实例方法getArea()中，我们可以通过this来访问实例的属性。

需要注意的是，在箭头函数中，this关键字的行为有所不同。它不会根据调用方式或上下文而变化，而是继承了定义该函数时的词法环境的this值。

3.在事件处理程序中使用this：

  <script>
      document.addEventListener('DOMContentLoaded', function() {
        const button = document.querySelector('button');

        button.addEventListener('click', function() {
          console.log(this); // 输出: <button>Click me</button>
        });
      });
  </script>

  <body>
    <button>Click me</button>
  </body>

在上面的示例中，this指向触发事件的元素，即按钮元素。这样我们可以在事件处理程序中访问和操作该元素。

通过使用this关键字，我们可以在JavaScript中引用当前上下文的对象，从而实现更灵活和动态的编程。

super关键字

在JavaScript中，super关键字用于调用父类的构造函数、方法和访问父类的属性。下面是一些示例来说明如何使用super关键字。

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

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
console.log(dog.name); // 输出: Buddy
console.log(dog.breed); // 输出: Golden Retriever

在上面的示例中，Dog类继承了Animal类，并在子类的构造函数中使用super(name)来调用父类的构造函数并传递参数。

2.调用父类的方法：

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    super.speak(); // 调用父类的speak()方法
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.speak(); 
// 输出:
// Buddy makes a sound.
// Buddy barks.

在上面的示例中，Dog类重写了父类的speak()方法，并在子类的speak()方法中使用super.speak()来调用父类的speak()方法。

3.访问父类的属性：

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  getDetails() {
    console.log(`Name: ${this.name}, Breed: ${this.breed}`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');
dog.getDetails(); // 输出: Name: Buddy, Breed: Golden Retriever

在上面的示例中，Dog类通过super(name)来访问父类Animal的属性name。

通过使用super关键字，我们可以在JavaScript中实现继承和访问父类的构造函数、方法和属性。