JS中extends的作用与使用场景解析

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《JS 中 extends 继承的作用与使用场景》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

extends关键字用于实现类的继承，使子类可继承父类属性和方法并支持扩展或重写；2. 适合在“is-a”关系、代码复用、功能扩展及框架设计时使用；3. 避免继承链过长导致复杂性和冲突，应优先使用组合、接口抽象和合理层级设计；4. JS不支持多重继承，可用Mixins或对象组合模拟；5. super必须在子类构造器中首行调用，并可用于访问父类方法；6. ES6继承本质仍是原型链的语法糖，提升可读性但不改变底层机制。

extends 关键字在 JavaScript 中主要用于实现类的继承，允许一个类（子类）继承另一个类（父类）的属性和方法，从而实现代码复用和扩展。

解决方案

extends 关键字的核心作用在于建立类之间的继承关系。子类会继承父类的所有可继承属性和方法（包括构造函数、实例方法、静态方法等），并可以在此基础上进行扩展或修改。

例如：

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() {
    console.log(`${this.name} barks.`); // 重写父类方法
  }

  fetch() {
    console.log(`${this.name} is fetching the ball.`);
  }
}

const myDog = new Dog("Buddy", "Golden Retriever");
myDog.speak(); // 输出: Buddy barks.
myDog.fetch(); // 输出: Buddy is fetching the ball.

在这个例子中，Dog 类继承了 Animal 类，并重写了 speak 方法，还添加了 fetch 方法。super(name) 用于调用父类的构造函数，确保父类的初始化逻辑得到执行。 如果忘记调用 super()，就会报错，因为 this 在子类构造函数中必须先调用 super() 之后才能使用。

何时应该使用 extends 继承？

继承并非万能药，过度使用反而会导致代码耦合度增加，维护困难。下面是一些适合使用继承的场景：

• "is-a" 关系： 当一个类确实是另一个类的特殊类型时，适合使用继承。例如，Dog is-a Animal，Car is-a Vehicle。
• 代码复用： 当多个类共享相似的属性和方法时，可以将这些公共部分提取到父类中，子类通过继承来复用代码。
• 扩展现有功能： 当需要在现有类的基础上添加新的功能或修改现有功能时，可以使用继承。
• 框架和库的设计： 许多框架和库使用继承来实现插件机制或扩展点。

继承链过长带来的问题及规避方法

继承链过长，会导致以下问题：

• 代码复杂性增加： 难以理解和维护。
• 命名冲突： 子类和父类可能存在命名冲突，导致意外的行为。
• 性能问题： 在某些情况下，过长的继承链可能会影响性能。

规避方法：

• 组合优于继承： 优先考虑使用组合，将对象作为属性嵌入到另一个对象中，而不是通过继承来获取功能。
• 接口和抽象类： 使用接口和抽象类来定义规范，而不是强制子类继承所有属性和方法。
• 合理设计继承层级： 避免过度设计，尽量保持继承层级简洁。

多重继承的替代方案

JavaScript 不支持多重继承（一个类同时继承多个父类），但可以使用以下方法来模拟多重继承：

• Mixins： Mixins 是一种将多个类的功能混合到一个类中的技术。
• 组合： 将多个类的实例组合到一个类中，通过委托来实现功能复用。

例如，使用 Mixin：

const barkMixin = (Base) => class extends Base {
  bark() {
    console.log("Woof!");
  }
};

const flyMixin = (Base) => class extends Base {
  fly() {
    console.log("I'm flying!");
  }
};

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

class Dog extends barkMixin(Animal) {}

class FlyingDog extends flyMixin(barkMixin(Animal)) {}

const myDog = new Dog("Buddy");
myDog.bark(); // 输出: Woof!

const myFlyingDog = new FlyingDog("SuperBuddy");
myFlyingDog.bark(); // 输出: Woof!
myFlyingDog.fly(); // 输出: I'm flying!

super 关键字的深入理解

super 关键字在子类中扮演着重要的角色。它有两个主要用途：

1. 调用父类的构造函数： super() 必须在子类构造函数中首先调用，用于初始化父类的属性。
2. 访问父类的方法： super.methodName() 用于调用父类中定义的 methodName 方法。

super 关键字的行为取决于它所处的位置。在构造函数中，它必须首先调用，否则会抛出错误。在其他方法中，它可以用来调用父类的方法，实现方法重写和扩展。需要注意的是，super 只能在派生类（即使用 extends 关键字声明的类）中使用。

ES6 继承与原型链的关系

ES6 的 extends 关键字实际上是基于原型链实现的语法糖。它并没有改变 JavaScript 原型继承的本质，只是提供了一种更简洁、更易于理解的语法。

当我们使用 extends 关键字创建一个子类时，JavaScript 会自动设置子类的原型为父类，从而实现继承。子类可以通过原型链访问父类的属性和方法。

简单来说，extends 关键字只是让原型链的继承关系更加明确和易于使用，但底层机制仍然是基于原型链。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS中extends的作用与使用场景解析》文章吧，也可关注golang学习网公众号了解相关技术文章。