继承行为在 ES5 与 ES6 中的区别详解

在 JavaScript 中，继承是一个重要的概念。它可以帮助我们构建可重用的代码，增加代码的可维护性和可扩展性。在 ES5 和 ES6 中，继承的行为发生了一些变化，本文将详细讲解这些区别，并通过示例说明。

ES5 中的继承

在 ES5 中，继承是通过“原型链”来实现的。每个对象都有一个内部属性 [[Prototype]]，可以通过 Object.getPrototypeOf() 方法访问它。当我们尝试访问一个对象的一个属性时，如果对象本身没有这个属性，JavaScript 引擎会沿着对象的 [[Prototype]] 链向上查找，直到找到该属性为止。

我们可以通过 Object.create() 方法来创建一个新的对象，将其原型指向另一个对象，从而实现继承。例如：

// 父类
function Animal(name) {
  this.name = name;
}

// 子类
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

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

// 使用
var myDog = new Dog('小黑', '藏獒');
console.log(myDog.name); // '小黑'
console.log(myDog.breed); // '藏獒'

上面的示例中，我们定义了一个父类 Animal 和一个子类 Dog，并使用 Object.create() 方法来创建了 Dog 的原型，使其继承 Animal 的原型。然后我们在 Dog 的构造函数中调用了 Animal 的构造函数，以初始化 name 属性。

ES6 中的继承

在 ES6 中，我们可以使用 class 和 extends 关键字来实现继承。例如：

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

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

// 使用
const myDog = new Dog('小黑', '藏獒');
console.log(myDog.name); // '小黑'
console.log(myDog.breed); // '藏獒'

上面的示例中，我们可以看到 class 关键字用来定义父类和子类，而 extends 关键字用来表示子类继承父类。在子类的构造函数中通过 super 关键字来调用父类的构造函数，以初始化 name 属性。

与 ES5 中的显示原型链相比，ES6 的继承使用了更加直观和易懂的语法，在编写面向对象的代码时更加方便。

ES5 和 ES6 继承的区别

ES6 的继承相比于 ES5 的继承，具有以下几个区别：

• 语法更加直观：ES6 的继承使用了 class 和 extends 关键字，语法更加清晰明了。
• 构造函数中初始化父类：在 ES5 中，我们需要在子类的构造函数中手动调用父类的构造函数来初始化父类的属性。而在 ES6 中，我们可以通过 super 关键字来直接调用父类的构造函数，以初始化父类的属性。
• 父类 static 和子类 static 的继承：在 ES5 中，父类的 static 属性无法继承给子类。而在 ES6 中，父类的 static 属性可以被子类继承。
• 继承内置对象：在 ES5 中，无法继承内置对象（如 Array、Date、RegExp 等），而在 ES6 中，我们可以通过 class 关键字来继承内置对象。

示例说明

示例 1：ES5 中的继承

我们定义一个父类 Vehicle 和一个子类 Car，Vehicle 拥有 printInfo 方法。我们将 Car 的 prototype 属性指向 Vehicle 的实例，从而实现继承。再在 Car 中定义 printCarInfo 方法，在其中通过 this 调用 Vehicle 的 printInfo 方法。

// 父类
function Vehicle() {}

Vehicle.prototype.printInfo = function() {
  console.log('这是一辆交通工具');
}

// 子类
function Car() {}

Car.prototype = new Vehicle();

Car.prototype.printCarInfo = function() {
  console.log('这是一辆汽车');
  this.printInfo();
}

// 使用
var myCar = new Car();
myCar.printCarInfo();

输出结果为：

这是一辆汽车
这是一辆交通工具

示例 2：ES6 中的继承

我们使用 class 和 extends 关键字来定义 Vehicle 和 Car 类，它们的代码与上述示例 1 中的代码等价。在 Car 中使用 super 关键字来调用父类的 printInfo 方法。

// 父类
class Vehicle {
  printInfo() {
    console.log('这是一辆交通工具');
  }
}

// 子类
class Car extends Vehicle {
  printCarInfo() {
    console.log('这是一辆汽车');
    super.printInfo();
  }
}

// 使用
const myCar = new Car();
myCar.printCarInfo();

输出结果为：

这是一辆汽车
这是一辆交通工具

阅读剩余 66%