ES5和ES6继承的本质区别

2023-10-03 14:54:19

在JavaScript中，继承是一种重要的概念，它允许我们在创建新类时重用现有类的属性和方法。在ES5中，继承是通过原型链来实现的，而在ES6中，继承是通过类来实现的。

原型链

在ES5中，继承是通过原型链来实现的。每个对象都有一个原型对象，原型对象也是一个对象，它包含了该对象的所有属性和方法。当我们访问一个对象的属性或方法时，JavaScript首先会在该对象中查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或方法。

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

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

function Student(name, major) {
  Person.call(this, name);
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

const student = new Student("John Doe", "Computer Science");

student.greet(); // Hello, my name is John Doe

在上面的代码中，Student类继承了Person类的属性和方法。Student类的原型对象是Person.prototype，因此Student类的实例可以访问Person.prototype上的属性和方法。

类

在ES6中，继承是通过类来实现的。类是一种新的语法，它允许我们使用更简洁的方式来创建对象。类也有原型对象，但它与ES5中的原型对象不同。ES6中的原型对象是一个特殊的对象，它包含了类的所有属性和方法。当我们访问一个类的属性或方法时，JavaScript首先会在该类中查找，如果找不到，就会沿着原型链向上查找，直到找到该属性或方法。

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

  greet() {
    console.log("Hello, my name is " + this.name);
  }
}

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }
}

const student = new Student("John Doe", "Computer Science");

student.greet(); // Hello, my name is John Doe