JS super关键字|极客笔记

JS super关键字

在JavaScript中，super关键字主要用于在子类中调用父类的方法和访问父类的属性。在本文中，我们将深入探讨super关键字的使用方法和原理。

1. 调用父类方法

当我们想要在子类中调用父类的方法时，可以使用super关键字。在子类的方法中调用父类方法时，使用super.methodName()的格式。下面是一个示例：

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

  greet() {
    console.log(`Hello, my name is  ${this.name}`); } } class Child extends Parent { constructor(name, age) { super(name); this.age = age; } greet() { super.greet(); // 调用父类的greet方法 console.log(`I am$ {this.age} years old`);
  }
}

const child = new Child('Alice', 10);
child.greet();

在上面的示例中，我们定义了一个Parent类和一个Child类。在Child类的greet方法中，我们首先调用了父类Parent的greet方法，然后再输出子类特有的信息。当我们实例化Child类并调用greet方法时，会依次输出：

Hello, my name is Alice
I am 10 years old

2. 访问父类属性

除了调用父类方法外，super关键字还可以用于访问父类的属性。在子类的构造函数中，通过super.propertyName的方式可以访问父类的属性。下面是一个示例：

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  displayInfo() {
    console.log(`My name is  ${super.name} and I am$ {this.age} years old`);
  }
}

const child = new Child('Bob', 8);
child.displayInfo();

在上面的示例中，我们定义了一个Parent类和一个Child类。在Child类的displayInfo方法中，我们通过super.name访问了父类Parent的name属性。当我们实例化Child类并调用displayInfo方法时，会输出：

My name is Bob and I am 8 years old

需要注意的是，super关键字只能在子类的方法中使用，不能在类的非方法成员中使用。

3. super()的注意事项

在子类的构造函数中，如果要调用父类的构造函数，必须在super()中传入相应的参数。如果子类没有定义构造函数，则会默认调用父类的构造函数。下面是一个示例：

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

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
}

const child = new Child('Alice', 10);
console.log(child.name); // 输出：Alice
console.log(child.age); // 输出：10

在上面的示例中，我们定义了一个Parent类和一个Child类。在Child类的构造函数中，我们通过super(name)调用了父类Parent的构造函数，并传入了相应的参数。当我们实例化Child类时，会正确地初始化name和age属性。