当前位置：首页 > JavaScript

js extends 实现

2026-04-07 01:59:38JavaScript

理解 extends 的基本概念

在 JavaScript 中，extends 关键字用于实现类之间的继承。子类可以通过 extends 继承父类的属性和方法，同时可以添加或覆盖父类的行为。

基本语法

子类通过 extends 继承父类：

class Parent {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 调用父类的构造函数
    this.age = age;
  }
  greet() {
    return `${super.greet()}! You are ${this.age} years old.`;
  }
}

const child = new Child('Alice', 10);
console.log(child.greet()); // 输出: Hello, Alice! You are 10 years old.

使用 super 关键字

super 关键字用于调用父类的构造函数或方法：

super() 必须在子类构造函数的第一行调用，用于初始化父类的属性。
super.methodName() 用于调用父类的方法。

覆盖父类方法

子类可以覆盖父类的方法，但仍可以通过 super 调用父类的原始方法：

class Animal {
  makeSound() {
    return 'Some generic sound';
  }
}

class Dog extends Animal {
  makeSound() {
    return `${super.makeSound()}... Bark!`;
  }
}

const dog = new Dog();
console.log(dog.makeSound()); // 输出: Some generic sound... Bark!

静态方法的继承

静态方法也会被继承：

class Parent {
  static staticMethod() {
    return 'Parent static method';
  }
}

class Child extends Parent {}

console.log(Child.staticMethod()); // 输出: Parent static method

继承内置对象

extends 也可以用于继承 JavaScript 内置对象，如 Array 或 Error：

js extends 实现

class CustomArray extends Array {
  sum() {
    return this.reduce((acc, val) => acc + val, 0);
  }
}

const arr = new CustomArray(1, 2, 3);
console.log(arr.sum()); // 输出: 6