JavaScript extends-JavaScript中文网-JavaScript教程资源分享门户

在面向对象编程中，继承是一种允许一个类（或对象）继承另一个类（或对象）的属性和方法的机制。这种机制可以简化代码重用，并且使得程序结构更加清晰。尽管JavaScript最初并不是一种基于类的语言，但ES6引入了class关键字以及extends关键字，从而使得面向对象编程更为直观和方便。

类与继承的基本概念

在ES6之前，JavaScript实现继承的方式通常依赖于原型链。而ES6之后，通过class关键字定义的类提供了一种更接近传统面向对象语言的语法糖。虽然背后依然使用原型链，但是通过class和extends，开发者可以更容易地理解和使用继承。

使用`extends`关键字

extends关键字用于创建子类，子类会继承父类的所有属性和方法。基本语法如下：

// www.javascriptcn.com code example
class ParentClass {
  constructor() {
    // 初始化代码
  }

  method() {
    // 方法定义
  }
}

class ChildClass extends ParentClass {
  constructor() {
    super(); // 必须调用super()来初始化父类
    // 子类特有的初始化代码
  }

  // 可以覆盖父类的方法
  method() {
    super.method(); // 调用父类的方法
    // 子类特有的逻辑
  }
}

继承中的构造函数

当子类创建实例时，constructor()方法会被自动调用。为了确保父类的构造函数能够正确执行，子类的构造函数中必须首先调用super()方法。这是因为super()实际上是对父类构造函数的一个引用，在调用它时会自动执行父类的构造函数。

`super`关键字的作用

除了用来调用父类的构造函数外，super还可以用来访问父类的属性和方法。例如，如果你想要调用父类中的某个特定方法，可以在子类的方法中使用super.methodName()的形式。

继承中的方法覆盖

子类可以通过重新定义父类中的方法来实现方法覆盖。这样做可以让子类根据自己的需求对父类的行为进行定制。需要注意的是，在子类方法中调用父类相同名称的方法时，应该使用super.methodName()而不是直接使用methodName()，这样可以确保调用的是父类的版本。

示例：继承与方法覆盖

假设我们有一个Animal类和一个继承自它的Dog类：

// www.javascriptcn.com code example
class Animal {
  constructor(name) {
    this.name = name;
  }

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

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

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

const d = new Dog('Rex', 'Dalmatian');
d.speak();
// 输出：
// Rex makes a noise.
// Rex barks.

在这个例子中，Dog类继承了Animal类，并且覆盖了speak方法。当我们在Dog实例上调用speak方法时，首先会执行父类的speak方法，然后执行子类的版本。

继承与静态方法

除了实例方法之外，类也可以定义静态方法。这些方法不依赖于任何实例，而是直接通过类名来调用。静态方法同样可以通过extends关键字继承给子类，但是它们不能被覆盖。

静态方法的继承

如果父类中有静态方法，那么子类可以直接访问这些方法，而不需要创建父类的实例。这为某些工具函数或辅助函数提供了很好的封装位置。

// www.javascriptcn.com code example
class MathUtil {
  static add(a, b) {
    return a + b;
  }
}

class AdvancedMathUtil extends MathUtil {
  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtil.add(1, 2)); // 输出: 3
console.log(AdvancedMathUtil.multiply(3, 4)); // 输出: 12

在这个例子中，AdvancedMathUtil类继承了MathUtil类，并且拥有自己的静态方法。但是，它仍然可以访问父类的静态方法。

总结

通过extends关键字，JavaScript中的继承变得简单而直观。利用这种方式，我们可以有效地组织代码，提高复用性，并且使程序更加模块化和易于维护。掌握继承的概念及其在JavaScript中的应用是每个前端开发者都应该具备的基本技能之一。

JavaScript extends