JavaScript 系列之六：理解六种继承方式，理解开发技巧

作为一名前端工程师，掌握 JavaScript 的继承机制至关重要。在本文中，我们将深入探索 JavaScript 中的六种继承方式：原型链继承、经典继承、组合继承、原型继承、寄生继承、寄生组合继承。通过详细的解析和示例，您将能够快速理解和掌握这些继承方式，为您的 JavaScript 开发之旅铺平道路。

原型链继承

原型链继承是 JavaScript 中最基本、最简单的继承方式。当一个对象被创建时，它会自动获得其原型对象（prototype）的属性和方法。原型对象也可以拥有自己的原型对象，如此层层递进，形成一条原型链。当对象访问一个属性或方法时，如果它自身不具有该属性或方法，它会沿着原型链向上查找，直到找到该属性或方法为止。

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

// 子类 Student
function Student(name, school) {
  Person.call(this, name); // 调用父类的构造函数
  this.school = school;
}

// 创建一个学生对象
const student = new Student('John Doe', 'Harvard University');

// 访问学生对象的属性和方法
console.log(student.name); // John Doe
console.log(student.school); // Harvard University

经典继承

经典继承，又称借用构造函数，是一种更为传统的继承方式。在这种方式下，子类直接调用父类的构造函数，将父类的属性和方法复制到子类中。

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

// 子类 Student
function Student(name, school) {
  // 调用父类的构造函数
  Person.call(this, name);

  // 子类特有的属性和方法
  this.school = school;
}

// 创建一个学生对象
const student = new Student('John Doe', 'Harvard University');

// 访问学生对象的属性和方法
console.log(student.name); // John Doe
console.log(student.school); // Harvard University

组合继承

组合继承是原型链继承和经典继承的结合。它首先使用原型链继承来建立原型链，然后使用经典继承来将父类的属性和方法复制到子类中。这种方式可以避免经典继承中对父类构造函数的重复调用，提高代码的可维护性。

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

// 子类 Student
function Student(name, school) {
  // 使用原型链继承建立原型链
  Student.prototype = new Person(name);

  // 子类特有的属性和方法
  this.school = school;
}

// 创建一个学生对象
const student = new Student('John Doe', 'Harvard University');

// 访问学生对象的属性和方法
console.log(student.name); // John Doe
console.log(student.school); // Harvard University

原型继承

原型继承是一种更为现代的继承方式。它直接使用对象的原型对象来实现继承，无需调用父类的构造函数。这种方式更加简单、高效，而且避免了经典继承中对父类构造函数的重复调用。

// 父类 Person
const Person = {
  name: 'John Doe',
};

// 子类 Student
const Student = Object.create(Person);
Student.school = 'Harvard University';

// 创建一个学生对象
const student = Object.create(Student);

// 访问学生对象的属性和方法
console.log(student.name); // John Doe
console.log(student.school); // Harvard University

寄生继承

寄生继承是一种更为灵活的继承方式。它通过创建一个新的对象，并将其原型对象指向父类对象来实现继承。这种方式可以避免对父类构造函数的调用，而且可以实现多重继承。

// 父类 Person
const Person = {
  name: 'John Doe',
};

// 子类 Student
const Student = (function () {
  // 创建一个新的对象
  const newObject = Object.create(null);

  // 将新对象的原型对象指向父类对象
  newObject.__proto__ = Person;

  // 添加子类特有的属性和方法
  newObject.school = 'Harvard University';

  // 返回新对象
  return newObject;
})();

// 创建一个学生对象
const student = Student();

// 访问学生对象的属性和方法
console.log(student.name); // John Doe
console.log(student.school); // Harvard University

寄生组合继承

寄生组合继承是原型继承和寄生继承的结合。它首先使用寄生继承创建一个新的对象，然后使用原型继承将其原型对象指向父类对象。这种方式可以结合两种继承方式的优点，实现更加灵活、强大的继承。

// 父类 Person
const Person = {
  name: 'John Doe',
};

// 子类 Student
const Student = (function () {
  // 创建一个新的对象
  const newObject = Object.create(null);

  // 将新对象的原型对象指向父类对象
  newObject.__proto__ = Person;

  // 添加子类特有的属性和方法
  newObject.school = 'Harvard University';

  // 返回新对象
  return newObject;
})();

// 创建一个学生对象
const student = Object.create(Student);

// 访问学生对象的属性和方法
console.log(student.name); // John Doe
console.log(student.school); // Harvard University

总结

本文详细介绍了 JavaScript 中的六种继承方式：原型链继承、经典继承、组合继承、原型继承、寄生继承、寄生组合继承。通过这些继承方式，我们可以实现不同类之间的代码重用，提高代码的可维护性。在实际开发中，我们可以根据不同的需求选择合适的继承方式，灵活运用它们来构建复杂的应用程序。