从原型链到ES6：JS继承演变之旅

2023-09-19 15:33:51

JS继承的发展过程

什么是继承？

顾名思义，继承是一种特性，它允许一个对象从另一个对象那里获取属性和方法。在面向对象编程中，这种机制非常重要，因为它使我们能够创建和扩展对象，而无需重新定义所有属性和方法。

在JavaScript中，继承历经了多次演变，从早期笨拙的原型链到更现代、更简洁的ES6类。在这篇文章中，我们将回顾JS继承的发展历程，探索每种方法的优缺点。

原型链继承

JavaScript中的继承最初是通过原型链实现的。每个对象都有一个内部__proto__属性，该属性指向其原型对象。原型对象又可能拥有自己的__proto__属性，指向其原型对象，依此类推。

const person = {
  name: 'John Doe'
};

const student = Object.create(person);
student.grade = 'A';

console.log(student.name); // John Doe
console.log(student.__proto__ === person); // true

原型链继承的优点在于简单易用。它不需要任何特殊的语法，只需要使用Object.create()方法创建一个新对象即可。

然而，原型链继承也有一些缺点。首先，它可能导致__proto__属性被意外修改或污染。其次，它使得确定对象的继承关系变得困难。最后，它与ES6类不兼容，这使得在使用ES6代码时很难使用原型链继承。

构造函数继承

构造函数继承是一种通过使用构造函数来创建对象的继承方法。构造函数是一个特殊的函数，它负责创建和初始化一个新对象。

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

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

const student = new Student('John Doe', 'A');

console.log(student.name); // John Doe
console.log(student instanceof Person); // true

构造函数继承的优点在于，它比原型链继承更安全，因为它不会污染__proto__属性。它还允许访问超类构造函数，这使得可以在子类中调用超类的方法。

然而，构造函数继承也有其缺点。它可能很冗长，特别是当需要继承多个超类时。此外，它使得无法在运行时动态创建新类。

ES6类继承

ES6引入了class，它提供了一种更简洁、更现代的继承语法。ES6类使用extends关键字继承其他类。

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

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

const student = new Student('John Doe', 'A');

console.log(student.name); // John Doe
console.log(student instanceof Person); // true