JavaScript 中 class 继承的知识点有哪些

在JavaScript中，class 继承是一种允许我们从另一个类创建类的机制，它是复用代码和实现多态性的关键手段。关于class继承的知识点主要包括继承的基本语法、构造函数的调用、静态方法和属性的继承、原型链理解和super关键字的用法。其中，构造函数的调用是理解继承中如何正确传递和初始化对象状态的基础。

构造函数的调用在类继承中发挥着核心作用。子类通过constructor方法接收参数，并需在第一行代码中调用super方法，传递给父类的constructor以确保父类的构造过程被正确执行。这步操作保证了子类实例能正确继承父类的属性和方法。省略constructor将导致JavaScript自动生成并调用一个默认的constructor，自动传递所有接收到的参数给super方法。

一、继承的基本语法

JavaScript 使用extends关键字来实现类的继承。一个类可以通过extends继承另一个类，并通过super关键字调用父类的constructor方法和其他方法。基本语法如下所示：

class Parent {

  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}
class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  introduce() {
    console.log(`I am ${this.age} years old.`);
  }
}

在这个例子中Child类继承了Parent类。需要注意的是，子类的constructor中，super方法必须被调用，这是因为它负责初始化父类部分的实例属性。

二、构造函数的调用

在子类中，super()的调用是必须的。如果没有调用super()而直接访问this，则会抛出一个错误，因为子类的this对象需要通过父类的构造函数来构建。super()方法也可以接收参数，这些参数会被传递给父类的构造函数。

class Parent {

  constructor(name) {
    this.name = name;
  }
}
class Child extends Parent {
  constructor(name, age) {
    super(name); // 正确调用父类的构造函数
    this.age = age;
  }
}

三、静态方法和属性的继承

静态方法和属性是定义在类本身上的，而不是定义在类的实例上。静态方法和属性也可以被继承。

class Parent {

  static hello() {
    console.log('Hello');
  }
}
class Child extends Parent {}
Child.hello(); // 'Hello'

继承静态方法和属性可以让子类拥有父类的静态功能，对于一些工具方法或配置信息非常有用。

四、原型链理解

在JavaScript中，每个对象都有一个指向另一个对象的内部链接，这种链接构成了所谓的“原型链”。类的继承实际上是通过原型链来实现的，子类的实例继承了父类实例的属性和方法。

let parent = new Parent();

let child = new Child();
console.log(child instanceof Child); // true
console.log(child instanceof Parent); // true

这说明child不仅是Child的实例，也是Parent的实例。这种机制提供了JavaScript中的继承能力。

五、super关键字的用法

super关键字在类的继承中扮演着重要的角色，它被用于访问和调用一个对象的父对象上的函数。super的使用不仅限于constructor方法，同样适用于普通方法中调用父类的方法。

class Parent {

  sayHello() {
    console.log('Hello from Parent');
  }
}
class Child extends Parent {
  sayHello() {
    super.sayHello(); // 调用父类的sayHello
    console.log('Hello from Child');
  }
}

这里，Child类的sayHello方法中通过super.sayHello()调用了Parent类的sayHello方法，然后执行自己的逻辑。这样可以保证在扩展或重写功能时，不会丢失父类的功能。

相关问答FAQs：

1. JavaScript 中如何定义一个类？
在JavaScript中，可以使用class关键字来定义一个类。例如，可以使用以下语法定义一个名为Person的类：

class Person {
  // 类的构造函数
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  // 类的方法
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

2. JavaScript 中如何实现类的继承？
JavaScript中的类继承可以通过extends关键字来实现。子类可以继承父类的属性和方法，并且可以添加自己的属性和方法。例如，可以通过以下方式定义一个名为Student的子类，继承自Person类：

class Student extends Person {
  // 子类的构造函数
  constructor(name, age, major) {
    // 调用父类的构造函数
    super(name, age);
    this.major = major;
  }
  
  // 子类的方法
  introduce() {
    console.log(`My name is ${this.name}, I am ${this.age} years old, and I am majoring in ${this.major}.`);
  }
}

3. JavaScript 中如何调用父类的方法？
在子类中，可以使用super关键字来调用父类的方法。例如，在Student类的introduce方法中，可以调用父类Person的sayHello方法，并在调用后添加自己类似于的介绍内容：

introduce() {
  super.sayHello();
  console.log(`I am majoring in ${this.major}.`);
}