JavaScript 继承：超越原型链，探索 ES6 Classes 的世界

2024-02-17 18:57:31

超越原型链

在 JavaScript 中，传统的继承方法是基于原型链的。每个对象都有一个内部属性 __proto__，它指向其原型对象。原型对象也是一个对象，它也有自己的 __proto__ 属性，依此类推，最终形成一条原型链。当一个对象访问一个不存在的属性时，JavaScript 会沿着原型链向上查找，直到找到该属性或到达原型链的末端。

原型链继承是一种非常灵活的方式，它允许我们在运行时动态地添加和修改属性和方法。然而，它也有一些缺点，比如它使得继承关系变得不那么显式，并且当我们想要访问父类的方法时，需要使用 super ，这可能会使代码变得更加复杂。

ES6 Classes

为了解决这些问题，ES6 引入了 Classes，它提供了一种更贴近传统面向对象语言的继承方式。使用 Classes，我们可以定义一个类，然后使用 new 关键字来创建该类的实例。实例继承了类的属性和方法，并且我们可以使用 extends 关键字来实现继承。

Classes 的工作原理

ES6 Classes 的工作原理与传统面向对象语言的 Classes 非常相似。一个类就是一个蓝图，它定义了对象的属性和方法。我们可以使用 new 关键字来创建该类的实例，实例继承了类的属性和方法。

继承

我们可以使用 extends 关键字来实现继承。在子类中，我们可以使用 super 关键字来访问父类的方法和属性。super 关键字指向父类的原型对象。

示例

以下是一个简单的例子，演示如何使用 ES6 Classes 来实现继承：

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

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

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

  bark() {
    console.log(`Woof! My name is ${this.name}`);
  }
}

const dog = new Dog('Buddy', 'Golden Retriever');

dog.speak(); // My name is Buddy
dog.bark(); // Woof! My name is Buddy