JS中的继承：揭秘子类如何获得父类力量

前端

2023-12-28 18:51:24

JavaScript继承的魅力：赋予子类父类的超能力

在面向对象编程（OOP）中，继承是一项关键特性，它允许子类继承父类的属性和方法，从而促进代码重用和组织性。JavaScript作为一门灵活且功能强大的语言，也提供了继承机制，使开发者能够构建更清晰、更高效的代码结构。

原型链：继承的秘密武器

在JavaScript中，继承通过称为原型链的机制实现。每个对象都有一个原型对象（prototype），该对象可能拥有自己的原型对象，如此层层向上追溯，最终到达一个没有原型对象的根对象（null）。

子类通过原型链继承父类。当子类访问一个属性或方法时，JavaScript会首先在子类自身查找。如果没有找到，就会沿着原型链向上查找，直到找到该属性或方法。

构造函数：实例化的魔法师

构造函数是JavaScript中创建子类实例的工具。构造函数的语法与普通函数类似，但它有一个特殊任务：为新创建的对象初始化属性和方法。

当使用new运算符调用构造函数时，就会创建一个新的子类实例。该实例会继承父类的所有公共成员，并可以访问父类的方法。

实例成员与类成员：子类的独特属性

JavaScript中，子类可以拥有自己的实例成员和类成员。实例成员是属于单个子类实例的属性和方法，而类成员是属于整个子类的属性和方法。

实例成员可以通过在构造函数中使用this定义，而类成员可以通过在子类中使用static定义。

子类实例的创建：赋予子类生命

要创建子类实例，JavaScript提供了new运算符。new运算符调用子类的构造函数，并为新创建的实例初始化属性和方法。

代码示例

例如，假设我们有一个Animal父类，它有一个name属性和一个speak()方法。我们可以创建一个Cat子类，并为其添加一个meow()方法，如下所示：

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

  speak() {
    console.log(`My name is ${this.name}`);
  }
}

class Cat extends Animal {
  constructor(name) {
    super(name);
  }

  meow() {
    console.log(`Meow! My name is ${this.name}`);
  }
}

const cat = new Cat('Kitty');
cat.speak(); // My name is Kitty
cat.meow(); // Meow! My name is Kitty