ES6与ES5继承机制的不同

2023-12-19 11:30:33

ES6 和 ES5 是 JavaScript 编程语言的两个主要版本，它们之间存在一些差异，其中之一就是继承机制的不同。在本文中，我们将详细对比 ES6 和 ES5 中的继承语法和机制，帮助您更好地理解和使用它们。

ES5 继承

在 ES5 中，继承是通过原型链来实现的。每个对象都有一个原型对象，原型对象中包含了该对象的所有属性和方法。当一个对象想要继承另一个对象时，只需将它的原型对象指向另一个对象的原型对象即可。

ES6 继承

ES6 中引入了新的继承语法，使用 class 和 extends 来实现继承。class 关键字用来定义一个类，extends 关键字用来指定一个类继承另一个类。

以下是一个 ES6 中继承的例子：

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

  speak() {
    console.log(`I am ${this.name}`);
  }
}

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

  bark() {
    console.log(`Woof! I am ${this.name} the ${this.breed}`);
  }
}

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

dog.speak(); // I am Fido
dog.bark(); // Woof! I am Fido the Golden Retriever

在这个例子中，Dog 类继承了 Animal 类。Dog 类拥有 Animal 类的所有属性和方法，此外还拥有自己的属性和方法。

ES6 与 ES5 继承的比较

下表对比了 ES6 和 ES5 中继承的异同点：

特征	ES5	ES6
语法	使用原型链	使用 `class` 和 `extends` 关键字
继承方式	通过原型对象	通过父类
子类与父类之间的关系	原型对象指向父类的原型对象	子类继承父类的所有属性和方法
子类自己的属性和方法	通过向原型对象中添加新属性和方法来实现	通过在子类中定义新的属性和方法来实现