深入理解 JavaScript 原型与原型链：从关系图到核心逻辑 - heshanwan - 博客园

2026-08-19

1841 字约 7 分钟

...

在 JavaScript 世界里，原型（Prototype）和原型链（Prototype Chain） 是理解对象继承、属性查找机制的基石。很多开发者初学时对它们 “又爱又恨”，这篇文章将结合经典关系图，用通俗易懂的方式拆解原型与原型链的核心逻辑，帮你彻底掌握这套机制！

一、先搞懂几个核心概念

在分析关系图前，先明确 JavaScript 中与原型相关的关键概念，避免后续混淆：

1. 函数对象与普通对象

函数对象：由 Function 构造出来的对象，本质是可执行的函数（比如 function Foo(){}、内置的 Object()、Function() ）。
普通对象：由构造函数（如 new Foo()、new Object() ）创建的实例，或直接字面量 {} 创建的对象。

关键区别：函数对象有 prototype 属性（用于关联原型对象），普通对象没有 prototype，但所有对象（包括函数对象）都有 __proto__ 属性（指向自身的原型）。

2. `prototype` vs `proto` vs `constructor`

prototype：函数对象专属的属性，指向一个 “原型对象”。当用这个函数作为构造函数创建实例时，实例的 __proto__ 会指向该 prototype。
__proto__：所有对象（包括函数） 都有的隐式原型属性，指向当前对象的 “原型对象”，是 JavaScript 引擎实现原型链查找的关键。
constructor：原型对象 上的属性，指向创建该原型的 “构造函数”（形成循环引用，方便实例找到构造函数）。

二、拆解关系图：原型与原型链的核心链路

结合题目中的关系图，我们从 构造函数、实例对象、原型对象 三个维度，梳理它们的关联：

1. 自定义构造函数 `Foo` 的链路

假设我们写了一个构造函数 function Foo() {}，它的原型链路是这样的：

（1）构造函数 `Foo` 自身

Foo 是函数对象，由 Function 构造而来（Foo = new Function(...) 的简化逻辑）。
所以：
- Foo.__proto__ → 指向 Function.prototype（函数对象的原型是 Function 的原型）。
- Foo.prototype → 指向 Foo 的 “原型对象”（Foo.prototype 是普通对象，默认包含 constructor: Foo ）。

（2）`Foo` 的实例（`f1`、`f2`）

用 new Foo() 创建实例 f1、f2 时：

实例的 __proto__ → 指向 Foo.prototype（构造函数的 prototype 成为实例的原型）。
所以：f1.__proto__ === Foo.prototype、f2.__proto__ === Foo.prototype。

（3）`Foo.prototype` 的链路

Foo.prototype 是普通对象，它的 __proto__ 指向谁？

因为所有普通对象默认由 Object 构造，所以：Foo.prototype.__proto__ → 指向 Object.prototype（普通对象的原型链路起点）。

2. 内置构造函数 `Object` 的链路

Object 是 JavaScript 内置的构造函数，用来创建普通对象（如 new Object()、{} ），它的链路：

（1）构造函数 `Object` 自身

Object 是函数对象，同样由 Function 构造而来（Object = new Function(...) 逻辑）。
所以：
- Object.__proto__ → 指向 Function.prototype（函数对象的原型统一关联 Function.prototype ）。
- Object.prototype → 指向 Object 的 “原型对象”（所有普通对象的最终原型之一）。

（2）`Object` 的实例（`o1`、`o2`）

用 new Object() 创建实例 o1、o2 时：

实例的 __proto__ → 指向 Object.prototype（构造函数 Object 的 prototype 是实例原型）。

（3）`Object.prototype` 的链路

Object.prototype 是 JavaScript 原型链的终点之一（最顶层普通对象原型），所以：Object.prototype.__proto__ → 指向 null（没有更上层的原型了）。

3. 万物之源 `Function` 的链路

Function 是 JavaScript 中最特殊的构造函数，所有函数对象（包括 Object、Foo、Function 自身）都由它构造，链路非常 “递归”：

（1）构造函数 `Function` 自身

Function 是函数对象，同时它也是自身的实例（Function = new Function(...) ，自己构造自己）。
所以：
- Function.__proto__ → 指向 Function.prototype（自己的原型指向自己的 prototype ，形成递归）。
- Function.prototype → 指向 Function 的 “原型对象”，它的 __proto__ 又指向 Object.prototype（因为 Function.prototype 本质是普通对象）。

（2）`Function.prototype` 的链路

Function.prototype 是函数对象的原型，它的 __proto__：Function.prototype.__proto__ → 指向 Object.prototype（因为 Function.prototype 是普通对象，最终归属 Object 原型链）。

三、原型链的本质：属性查找的 “追溯链”

理解了原型关联后，原型链 的作用就清晰了：

当你访问一个对象的属性（如 f1.name ）时，JavaScript 引擎会：

先在对象自身找（f1 有没有 name 属性）；
如果没找到，就顺着 __proto__ 去原型对象里找（f1.__proto__ 即 Foo.prototype 里找）；
如果还没找到，继续顺着 Foo.prototype.__proto__ 去 Object.prototype 里找；
直到找到属性，或追到 __proto__ 为 null（原型链终点），返回 undefined。

举个例子：

function Foo() {}
Foo.prototype.sayHi = function() { console.log('Hi~'); };

const f1 = new Foo();
f1.toString();

四、原型与原型链的实际应用

理解这套机制后，就能明白 JavaScript 中 “继承”“属性复用” 的底层逻辑，典型场景：

1. 原型继承

通过修改 __proto__ 或利用 prototype，让对象继承其他对象的属性：

const parent = { name: 'Parent' };
const child = { age: 18 };
child.__proto__ = parent; 

console.log(child.name);

2. 构造函数复用方法

把方法挂载到 prototype 上，所有实例共享方法（节省内存）：

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function() { 
  console.log(this.name); 
};

const p1 = new Person('Alice');
const p2 = new Person('Bob');
p1.sayName(); 
p2.sayName();

3. 理解内置对象的原型

比如数组 [] 的原型链：

const arr = [1, 2];

五、总结：原型与原型链的核心逻辑

所有对象（包括函数） 都有 __proto__，指向自己的原型；
函数对象 额外有 prototype，用于关联实例的 __proto__；
原型链 是属性查找的链路，从自身到 __proto__ 层层追溯，直到 null；
Function 是 “函数对象的源头”，Object.prototype 是 “普通对象原型链的终点”，共同构成 JavaScript 对象体系的基石。