🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

原型链的定义和背景

原型链是 JavaScript 中一种用于实现继承和共享属性的机制。
它基于原型对象和原型链的概念，允许对象之间共享属性和方法。

在 JavaScript 中，每个对象都有一个原型对象（Prototype），它是一个包含该对象的属性和方法的对象。当你访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，那么 JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

原型链的背景是为了实现继承和代码复用。在 JavaScript 中，没有像其他面向对象语言中的类继承机制，而是通过原型链来实现继承。通过将一个对象的原型对象设置为另一个对象，就可以实现继承，从而使子对象可以访问父对象的属性和方法。

原型链的工作方式可以用下面的图来表示：

Object ---> Person ---> Employee

在这个例子中，Person 是 Employee 的原型对象，Employee 可以访问 Person 中的属性和方法。同样，Object 是所有对象的原型对象，因此 Person 和 Employee 都可以访问 Object 中的属性和方法。

原型链是 JavaScript 中非常重要的概念，它对于实现继承、代码复用和对象的扩展都非常有用。理解原型链的工作原理对于深入理解 JavaScript 的面向对象编程特性非常重要。

原型链在 JavaScript 中的重要性

原型链在 JavaScript 中具有重要的作用，主要体现在以下几个方面：

1. 实现继承：原型链是 JavaScript 中实现继承的主要机制。通过将一个对象的原型对象设置为另一个对象，可以实现子对象继承父对象的属性和方法。这种继承方式可以实现代码的复用和扩展，提高了开发效率。

2. 共享属性和方法：原型链允许对象之间共享属性和方法。当多个对象需要共享相同的属性或方法时，可以将这些属性或方法定义在一个原型对象中，然后将该原型对象作为这些对象的原型。这样，所有的子对象都可以访问和使用这些共享的属性和方法，避免了代码的重复定义。

3. 动态扩展对象：原型链使得对象可以在运行时动态地扩展。通过向原型对象中添加属性或方法，可以在不修改原始对象的情况下为其添加新的功能。这种动态扩展对象的能力提高了代码的灵活性和可维护性。

4. 理解面向对象编程：原型链是理解 JavaScript 面向对象编程的关键概念之一。它提供了一种不同于其他面向对象语言中的类继承机制的方式，帮助开发者更好地理解 JavaScript 中的对象、属性和方法的关系。

总之，原型链在 JavaScript 中扮演着重要的角色，它提供了一种灵活、高效的方式来实现继承、共享属性和方法，以及动态扩展对象。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

二、原型链的基本概念

对象原型

在 JavaScript 中，对象原型（Object Prototype）是指一个对象用于定义其他对象的属性和方法的模板。每个对象都有一个关联的原型对象，它可以被用来共享属性和方法，从而实现继承和代码复用。

当你创建一个新的对象时，它会自动继承其原型对象的属性和方法。你可以通过对象的 __proto__ 属性来访问其原型对象，也可以通过 Object.getPrototypeOf() 方法来获取对象的原型对象。

原型对象本身也是一个对象，它可以有自己的属性和方法。当你访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

通过原型链，你可以实现对象之间的继承。一个对象可以将另一个对象作为其原型，从而继承该对象的属性和方法。这种继承方式与其他面向对象语言中的类继承机制不同，它是基于原型对象的继承。

原型链在 JavaScript 中非常重要，它是实现继承、共享属性和方法、动态扩展对象等功能的基础。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

原型链的结构

原型链是一个由对象和它们的原型对象组成的链，用于实现继承和共享属性和方法。

下面是一个简单的示例来展示原型链的结构：

// 创建一个 Person 类
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 创建一个 Employee 类，继承自 Person 类
function Employee(salary) {
  Person.call(this, "John", 30); // 调用 Person 类的构造函数
  this.salary = salary;
}

// 为 Person 类添加一个方法
Person.prototype.getInfo = function() {
  return `姓名：${this.name}，年龄：${this.age}`;
};

// 为 Employee 类添加一个方法
Employee.prototype.getSalary = function() {
  return this.salary;
};

// 创建 Person 对象和 Employee 对象
const person = new Person("John", 30);
const employee = new Employee(5000);

// 访问对象的属性和方法
console.log(person.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getSalary()); // 输出：5000

在这个示例中，我们创建了两个类：Person 和 Employee。Employee 类继承自 Person 类，通过调用 Person 类的构造函数来初始化 Employee 对象的属性。

每个类都有一个原型对象，它是一个用于共享属性和方法的模板。在这个例子中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

原型链的结构可以用下面的图来表示：

Person.prototype -> Person
Employee.prototype -> Person.prototype -> Object.prototype -> null
person -> Employee.prototype -> Person.prototype -> Object.prototype -> null
employee -> Employee.prototype -> Person.prototype -> Object.prototype -> null

在这个图中，每个对象都有一个指向其原型对象的指针（__proto__ 属性），从而形成了一个原型链。当访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

通过原型链，我们可以实现继承、共享属性和方法、动态扩展对象等功能。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

三、原型链的工作原理

继承和属性共享

在 JavaScript 中，继承和属性共享是通过原型链实现的。

继承是指一个类（子类）可以从另一个类（父类）中继承属性和方法。子类可以访问父类的属性和方法，并且可以根据需要覆盖或扩展这些属性和方法。在上面的示例中，Employee 类从 Person 类继承了属性和方法，因此 employee 对象可以访问 Person 类的属性和方法。

属性共享是指多个对象可以共享相同的属性和方法。这是通过原型对象实现的。原型对象是一个用于共享属性和方法的模板，所有的子类对象都可以访问原型对象上的属性和方法。在上面的示例中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象，它们用于共享属性和方法。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

通过原型链，我们可以实现继承和属性共享，从而提高代码的复用性和可扩展性。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

原型链的查询过程

原型链的查询过程是指当访问一个对象的属性或方法时，JavaScript 会沿着原型链向上查找，直到找到定义了该属性或方法的原型对象。

以下是一个简单的示例来演示原型链的查询过程：

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

Person.prototype.getInfo = function() {
  return `姓名：${this.name}，年龄：${this.age}`;
};

function Employee(salary) {
  Person.call(this, "John", 30); // 调用 Person 类的构造函数
  this.salary = salary;
}

Employee.prototype = Object.create(Person.prototype); // 将 Employee 的原型对象设置为 Person 的原型对象
Employee.prototype.getSalary = function() {
  return this.salary;
};

const person = new Person("John", 30);
const employee = new Employee(5000);

console.log(person.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getInfo()); // 输出：姓名：John，年龄：30
console.log(employee.getSalary()); // 输出：5000

在这个示例中，我们创建了两个类：Person 和 Employee。Employee 类继承自 Person 类，通过调用 Person 类的构造函数来初始化 Employee 对象的属性。

每个类都有一个原型对象，它是一个用于共享属性和方法的模板。在这个例子中，Person.prototype 和 Employee.prototype 分别是 Person 类和 Employee 类的原型对象。

当我们创建 person 和 employee 对象时，它们会自动继承其类的原型对象的属性和方法。因此，person 对象可以访问 Person.prototype 上的 getInfo 方法，而 employee 对象可以访问 Person.prototype 上的 getInfo 方法以及 Employee.prototype 上的 getSalary 方法。

当我们访问 person.getInfo() 或 employee.getInfo() 时，JavaScript 会沿着原型链向上查找，直到找到定义了该方法的原型对象。在这个例子中，Person.prototype.getInfo() 方法被找到并执行，因此输出结果为 姓名：John，年龄：30。

当我们访问 employee.getSalary() 时，同样的过程会发生，但是这次 JavaScript 会在 Employee.prototype 上找到定义了该方法的原型对象，并执行 Employee.prototype.getSalary() 方法，因此输出结果为 5000。

通过原型链，我们可以实现继承、共享属性和方法、动态扩展对象等功能。理解原型链对于深入理解 JavaScript 的面向对象编程特性和开发高效的 JavaScript 代码非常重要。

四、原型链的应用

• 实现继承
• 共享属性和方法