JavaScript继承的六种模式：深入理解原型的强大功能

前端

2024-01-13 16:51:48

在JavaScript中，继承是一种重要的机制，它允许你创建新的对象，这些对象可以从现有的对象继承属性和方法。这使得代码可以重用，并简化了复杂系统的构建。

JavaScript中实现继承的方法有多种，每种方法都有其独特的优点和缺点。在这篇文章中，我们将探讨六种最常用的JavaScript继承模式：

原型式继承
工厂模式
构造函数模式
组合继承
寄生继承
混合继承

原型链：JavaScript继承的基础

在深入探讨具体的继承模式之前，让我们首先了解一下原型链，它是理解JavaScript继承的关键。

在JavaScript中，每个对象都有一個内建的__proto__属性，它指向对象的原型对象。原型对象包含了一组属性和方法，这些属性和方法可以通过继承被子对象访问。

当访问一个对象的属性或方法时，JavaScript引擎首先会在该对象中查找。如果找不到，它会沿着原型链向上查找，直到找到该属性或方法。这种机制允许对象继承其原型的属性和方法，而无需显式地复制它们。

1. 原型式继承

原型式继承是最简单、最直接的JavaScript继承方式。它通过直接设置新对象的__proto__属性为现有对象的原型来实现继承。

// 父对象
const Person = {
  name: 'John Doe',
  age: 30
};

// 使用原型式继承创建子对象
const Employee = {
  __proto__: Person,
  jobTitle: 'Software Engineer'
};

现在，Employee对象将继承Person对象的name和age属性。它还可以访问Person对象的任何方法。

2. 工厂模式

工厂模式是一种基于函数的继承方式。它创建一个函数，该函数返回一个新对象，该对象继承了指定原型的属性和方法。

// 创建一个工厂函数
const createEmployee = (name, age, jobTitle) => {
  // 创建一个新对象
  const employee = {};

  // 设置新对象的原型
  employee.__proto__ = {
    name,
    age
  };

  // 添加特定的属性和方法
  employee.jobTitle = jobTitle;

  // 返回新对象
  return employee;
};

// 创建一个员工对象
const employee = createEmployee('John Doe', 30, 'Software Engineer');

工厂模式的一个优点是它可以创建具有不同原型的对象。这在需要创建不同类型的对象时非常有用，这些对象具有相似的属性和方法，但需要不同的实现。

3. 构造函数模式

构造函数模式是一种基于类的继承方式。它创建一个构造函数，该构造函数用于创建新对象，并且该对象继承了构造函数的原型属性和方法。

// 定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义一个子构造函数
function Employee(name, age, jobTitle) {
  // 调用父构造函数
  Person.call(this, name, age);

  // 添加特定的属性和方法
  this.jobTitle = jobTitle;
}

// 设置子构造函数的原型
Employee.prototype = Object.create(Person.prototype);

// 创建一个员工对象
const employee = new Employee('John Doe', 30, 'Software Engineer');

构造函数模式的一个优点是它允许对继承的行为进行更精细的控制。例如，你可以使用super显式地调用父类的方法，或者使用Object.create()方法创建更复杂的原型继承层次结构。

4. 组合继承

组合继承是构造函数模式和原型式继承的组合。它通过创建一个子构造函数并同时设置其__proto__属性和原型链来实现继承。

// 定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义一个子构造函数
function Employee(name, age, jobTitle) {
  // 调用父构造函数
  Person.call(this, name, age);

  // 设置子对象的原型
  this.__proto__ = {
    jobTitle
  };
}

// 创建一个员工对象
const employee = new Employee('John Doe', 30, 'Software Engineer');

组合继承结合了构造函数模式和原型式继承的优点，它允许对继承的行为进行精细控制，同时还可以使用原型式继承的简单性。

5. 寄生继承

寄生继承是一种不涉及修改子对象原型的继承方式。它通过创建一个新对象，该对象委托给父对象来实现继承。

// 定义父对象
const Person = {
  name: 'John Doe',
  age: 30
};

// 创建一个子对象
const Employee = (function() {
  // 创建一个新对象
  const employee = Object.create({});

  // 委托给父对象
  Object.assign(employee, Person);

  // 添加特定的属性和方法
  employee.jobTitle = 'Software Engineer';

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

寄生继承的一个优点是它允许在不修改父对象的情况下创建子对象。这在需要创建与父对象具有相同接口，但需要不同实现的子对象时非常有用。

6. 混合继承

混合继承是组合继承和寄生继承的组合。它通过创建一个子构造函数并同时设置其原型和委托父对象来实现继承。

// 定义构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 定义一个子构造函数
function Employee(name, age, jobTitle) {
  // 调用父构造函数
  Person.call(this, name, age);

  // 委托给父对象
  Object.assign(this, Person.prototype);

  // 添加特定的属性和方法
  this.jobTitle = jobTitle;
}

// 创建一个员工对象
const employee = new Employee('John Doe', 30, 'Software Engineer');