JavaScript 中 extends 关键字的作用是什么？

推荐答案

在 JavaScript 中，extends 关键字用于实现类的继承。它允许一个类继承另一个类的属性和方法，从而创建子类和父类之间的继承关系。通过 extends，子类可以继承父类的所有非私有属性和方法，并且可以在子类中添加新的方法或重写父类的方法。

// 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() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.speak(); // 输出: Rex barks.

本题详细解读

1. extends 的基本用法

extends 关键字用于创建一个类作为另一个类的子类。子类继承了父类的所有属性和方法，并且可以通过 super 关键字调用父类的构造函数和方法。

2. super 关键字

在子类的构造函数中，必须调用 super() 来初始化父类的构造函数。super 也可以用于调用父类的其他方法。

// www.javascriptcn.com code example
class Cat extends Animal {
  constructor(name, color) {
    super(name); // 调用父类的构造函数
    this.color = color;
  }

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

const cat = new Cat('Whiskers', 'white');
cat.speak(); 
// 输出: 
// Whiskers makes a noise.
// Whiskers meows.

3. 方法重写

子类可以重写父类的方法。在上面的例子中，Dog 类重写了 Animal 类的 speak 方法。

4. 静态方法的继承

extends 也可以继承父类的静态方法。

// www.javascriptcn.com code example
class Animal {
  static info() {
    console.log('This is an Animal class.');
  }
}

class Dog extends Animal {}

Dog.info(); // 输出: This is an Animal class.

5. 继承内置对象

extends 还可以用于继承 JavaScript 的内置对象，如 Array、Error 等。

class CustomArray extends Array {
  isEmpty() {
    return this.length === 0;
  }
}

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

通过 extends，JavaScript 提供了强大的面向对象编程能力，使得代码的组织和复用更加灵活和高效。