js中ES6继承和ES5继承之间的差别

ES6继承和ES5继承之间的差别主要表现在语法上和实现原理上。以下是详细讲解ES6继承和ES5继承之间的差别的攻略。

语法上的差别

ES5继承的语法

在ES5中实现继承的常用方式是通过原型链来实现。具体实现方式如下：

function Parent() {}
function Child() {}
Child.prototype = new Parent();

在这种实现方式中，子类通过原型链继承了父类的所有属性和方法。但是，这种继承方式有一些缺点。其中一个缺点是必须通过将子类的原型指向一个父类的实例来实现继承，这会导致子类的构造函数指向为父类的实例，而不是子类本身的构造函数。

ES6继承的语法

在ES6中，继承可以通过关键字extends来实现。具体实现方式如下：

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  sayAge() {
    console.log(`I'm ${this.age} years old`);
  }
}

在这种实现方式中，子类通过extends关键字继承了父类的所有属性和方法，并且子类的构造函数指向为子类本身的构造函数。

实现原理上的差别

ES5继承的实现原理

ES5继承的实现原理是通过原型链来实现。具体实现方式如下：

function Parent() {}
function Child() {}
Child.prototype = new Parent();

在这种实现方式中，子类的__proto__属性指向父类的原型，父类的__proto__属性指向Object.prototype，而Object.prototype的__proto__属性为null。

ES6继承的实现原理

ES6继承的实现原理是通过class和extends关键字来实现的，它使用了一种新的内部机制[[Prototype]]来实现继承。具体实现方式如下：

class Parent {}
class Child extends Parent {}

在这种实现方式中，子类的[[Prototype]]属性指向父类的原型。而这种内部机制是完全基于对象的，与传统的基于类的继承方式是不同的。

示例说明

示例一：ES5继承的缺点

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayHello = function() {
  console.log(`Hello, I'm ${this.name}`);
}

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

Dog.prototype = new Animal();
Dog.prototype.bark = function() {
  console.log('woof woof');
}

const dog = new Dog('Buddy');
console.log(dog.constructor); // 输出为 [Function: Animal] 而不是 [Function: Dog]

在上面的案例中，因为需要通过将子类的原型指向一个父类的实例来实现继承，所以子类的构造函数指向为父类的实例，而不是子类本身的构造函数。因此，我们在创建Dog实例时，它的构造函数为Animal而不是Dog。

示例二：ES6继承的优点

class Animal {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  bark() {
    console.log('woof woof');
  }
}

const dog = new Dog('Buddy');
console.log(dog.constructor); // 输出为 [Function: Dog]

在这个案例中，我们使用ES6的class和extends关键字来实现继承。子类Dog通过extends关键字继承了父类Animal的属性和方法，并且子类的构造函数指向为子类本身的构造函数。这样，我们在创建Dog实例时，它的构造函数为Dog而不是Animal。