ES6 中的 Class 继承及其与 ES5 继承的区别-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的 Class 继承是一种新的继承方式，它比 ES5 中的继承方式更加简洁和易于理解。在本文中，我们将详细介绍 ES6 中的 Class 继承及其与 ES5 继承的区别，并提供一些示例代码和学习指导。

ES6 中的 Class 继承

ES6 中的 Class 继承是通过 extends 关键字实现的。它的语法如下：

class ChildClass extends ParentClass {
  constructor() {
    super();
  }
}

在这个例子中，ChildClass 继承自 ParentClass。super() 方法用于调用父类的构造函数。

ES6 中的 Class 继承支持以下特性：

1. 支持多重继承

ES6 中的 Class 继承支持多重继承，即一个类可以继承自多个父类。例如：

class ChildClass extends ParentClass1, ParentClass2 {
  constructor() {
    super();
  }
}

2. 支持 `super` 关键字

ES6 中的 Class 继承支持 super 关键字，它可以用于调用父类的方法和属性。例如：

class ChildClass extends ParentClass {
  constructor() {
    super();
    this.name = 'ChildClass';
  }

  sayName() {
    console.log(super.name + ' says hello');
  }
}

在这个例子中，sayName 方法中使用了 super.name 来调用父类的 name 属性。

3. 支持 `static` 关键字

ES6 中的 Class 继承支持 static 关键字，它可以用于定义静态方法和属性。例如：

class ChildClass extends ParentClass {
  static sayHello() {
    console.log('Hello');
  }
}

在这个例子中，sayHello 方法是一个静态方法，可以直接通过 ChildClass.sayHello() 调用。

ES5 中的继承

ES5 中的继承是通过原型链实现的。它的语法如下：

function ChildClass() {
  ParentClass.call(this);
}

ChildClass.prototype = Object.create(ParentClass.prototype);
ChildClass.prototype.constructor = ChildClass;

在这个例子中，ChildClass 继承自 ParentClass。ParentClass.call(this) 用于调用父类的构造函数，Object.create(ParentClass.prototype) 用于将 ChildClass.prototype 的原型设置为 ParentClass.prototype 的一个实例。

ES5 中的继承有以下缺点：

1. 不支持多重继承

ES5 中的继承不支持多重继承，即一个类只能继承自一个父类。

2. 不支持 `super` 关键字

ES5 中的继承不支持 super 关键字，需要使用 ParentClass.prototype 来调用父类的方法和属性。

3. 不支持 `static` 关键字

ES5 中的继承不支持 static 关键字，需要使用函数来模拟静态方法和属性。

示例代码

下面是一个使用 ES6 中的 Class 继承和 ES5 中的继承实现同样功能的示例代码：

// ES6 中的 Class 继承
class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

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

  sayMeow() {
    console.log('Meow');
  }
}

const cat = new Cat('Tom');
cat.sayName(); // 输出：Tom
cat.sayMeow(); // 输出：Meow


// ES5 中的继承
function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(this.name);
}

function Cat(name) {
  Animal.call(this, name);
}

Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;

Cat.prototype.sayMeow = function() {
  console.log('Meow');
}

var cat = new Cat('Tom');
cat.sayName(); // 输出：Tom
cat.sayMeow(); // 输出：Meow

总结

ES6 中的 Class 继承比 ES5 中的继承更加简洁和易于理解，支持多重继承、super 关键字和 static 关键字。我们应该尽可能地使用 ES6 中的 Class 继承来实现继承功能，避免使用 ES5 中的继承。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65c0b354add4f0e0ffab1ac8

ES6 中的 Class 继承及其与 ES5 继承的区别