深入理解 JavaScript 原型机制：构造函数、原型对象与原型链

深入理解 JavaScript 原型机制：构造函数、原型对象与原型链

JavaScript 的对象系统与传统面向对象语言存在显著差异。尽管 ES6 引入了 class 语法，但其底层仍然基于 原型（prototype）机制 实现。理解原型体系，是掌握 JavaScript 面向对象思想的关键。

本文从构造函数与实例入手，逐步分析原型对象、__proto__ 属性以及原型链的工作原理。

---

一、构造函数：生成对象的基础机制

在 JavaScript 中，任何函数都可以作为构造函数使用。当一个函数通过 new 操作符调用时，它会执行如下步骤：

1. 创建一个全新的空对象；
2. 将该对象的 __proto__ 内部属性关联到构造函数的 prototype；
3. 将构造函数中的 this 绑定到该新对象；
4. 返回该新对象（若构造函数未显式返回其他对象）。

示例：

function Car(color) {
    this.color = color;
}

const su7 = new Car("white");

此时，su7 具备以下特性：

• 拥有自己的实例属性 color；
• 能访问构造函数原型对象上的公共方法和属性。

---

二、prototype：实例共享的公共空间

每一个函数在创建时，都自动拥有一个名为 prototype 的属性，它的值是一个对象。

该对象用于存放可被所有实例共享的属性和方法。例如：

Car.prototype.drive = function() {
    console.log("Car driving...");
};

此时，通过 new Car() 创建的所有对象都可以访问 drive 方法，即便方法并不存储在实例本身。

作用总结：

• 它是"共享属性与方法"的容器；
• 它决定了实例对象的继承结构；
• 它构成了原型链的重要节点。

---

三、proto：实例指向原型的内部链接

每个对象（除基于 Object.create(null) 创建的）都有一个名为 __proto__ 的内部属性，用于指向其原型对象。

su7.__proto__ === Car.prototype; // true

需要注意的是：

• __proto__ 并非标准属性（属于浏览器早期实现），但 ES6 将其纳入附录 B，表示可以使用但不推荐依赖；
• 正式 API 是 Object.getPrototypeOf(obj) 与 Object.setPrototypeOf(obj, proto)。

---

四、原型链：JavaScript 的继承模型

当访问对象的某个属性时，JavaScript 会沿着如下路径查找：

1. 先从对象自身查找；
2. 若不存在，则沿着 __proto__ 指向的原型对象查找；
3. 若仍不存在，则继续查找原型对象的原型；
4. 最终到达 Object.prototype；
5. 若仍找不到，则返回 undefined。

示例：

su7 → Car.prototype → Object.prototype → null

这条由多个原型对象组成的查找路径被称为 原型链（Prototype Chain） 。

---

五、原型链的终点：Object.prototype

所有普通对象的原型链最终都会到达：

Object.prototype

而：

Object.prototype.__proto__ === null

这意味着继承链至此终止。null 表示"没有原型对象"，也是属性查找的最终停止点。

---

六、Class 并未改变 JavaScript 的面向对象本质

ES6 引入 class 后，可以使用更类似传统面向对象语言的方式定义类：

class Car {
    constructor(color) {
        this.color = color;
    }
    drive() {
        console.log("driving...");
    }
}

但其底层仍然等同于：

• 将 constructor 中的逻辑作为构造函数执行；
• 将类方法添加到 Car.prototype；
• 实例的 __proto__ 指向 Car.prototype。

因此，JavaScript 本质仍然是 原型式继承（prototype-based inheritance） ，而不是传统的类继承模型。

---

七、总结

JavaScript 的原型体系构成了其对象继承的基础结构：

• 构造函数负责初始化实例属性；
• prototype作为共享方法存储区；
• proto连接实例与原型对象；
• 原型链实现属性查找和继承；
• Object.prototype 作为链顶，最终指向 null。

理解这一机制，有助于更深入掌握 JavaScript 的对象模型、继承、方法共享及底层运行原理，是进阶学习中必不可少的基础知识。