[3-1] 原型与面向对象 · 原型的核心齿轮 (The Prototype Mechanism)

西梯卧客
4 阅读2分钟

所属板块：3. 原型与面向对象（OOP）

记录日期：2026-03-xx
更新：遇到原型链查找或 __proto__ 相关题时补充

1. 原型机制：JS 对象之间最核心的“血脉纽带”

JavaScript 没有真正的“类”（Class-based），它从诞生起就是基于原型（Prototype-based） 的语言。
所有对象之间通过原型链实现属性和方法的共享（委托机制），这就是 JS 面向对象的底层齿轮。

记住：原型不是为了继承而存在，而是为了“共享内存”而存在。
理解了原型，就等于看懂了 JS 对象如何高效复用代码。

2. 三个最容易混淆的核心概念（原型三角关系）

  1. 显式原型 prototype

    • 只有函数才拥有（箭头函数除外）
    • 本质是一个普通对象，用于存放将来实例要共享的属性和方法
    • 默认自带一个 constructor 属性，指向构造函数本身
    function Person() {}
console.log(Person.prototype);           // { constructor: Person }
Person.prototype.say = function() { ... };

  2. 隐式原型 __proto__（内部插槽 [[Prototype]]）

    • 所有对象（包括函数）都拥有
    • 指向创建该对象的构造函数的 prototype
    • 标准访问方式：Object.getPrototypeOf(obj) / Object.setPrototypeOf(obj, proto)
    • __proto__ 只是浏览器历史遗留访问器，不推荐直接操作
    const p = new Person();
console.log(p.__proto__ === Person.prototype);   // true

  3. 构造器 constructor

    • 位于原型对象上，反向指向关联的构造函数
    • 容易被重写或丢失（继承时一定要手动修复）
    console.log(Person.prototype.constructor === Person);   // true

原型三角关系图（脑内必背）：

6ab85f07-34b3-4c1a-9622-9e2a8113cf16.png

3. 原型链（Prototype Chain）查找机制

当访问一个对象的属性时，JS 引擎会按以下顺序查找（“顺藤摸瓜”委托机制）：

  1. 先在实例自身属性里找（Own Property）
  2. 找不到 → 顺着 __proto__ 去原型对象找
  3. 再找不到 → 继续顺着原型的 __proto__ 找
  4. 直到 Object.prototype.__proto__ === null（原型链终点）

这就是属性屏蔽（Property Shadowing）：

function Person() {}
Person.prototype.name = "默认姓名";

const p = new Person();
p.name = "张三";           // 实例自身属性屏蔽了原型上的 name

console.log(p.name);       // "张三"（就近原则）

4. 原型链的终点与常见误区

  • 所有对象的原型链最终都指向 Object.prototype
  • Object.prototype.__proto__ === null（绝对终点，查找停止）
  • 常见误区：
    • 以为 __proto__ 是原型本身（错！它是链接指针）
    • 以为所有函数都有 prototype（箭头函数没有）
    • 直接修改 __proto__（会破坏性能和规范）

5. 小结 & 复习时的“血脉视角”

  • 画出原型三角关系图 + 原型链查找路径，是理解整个板块的基础
  • [3-1] 的原型机制 + 接下来的 [3-2] 对象创建 & new 操作符，共同构成了 JS 面向对象的核心骨架
  • 遇到“属性从哪来的”“为什么能调用 toString()”这类题，第一反应就是顺着原型链往上找

下一篇文章会进入 [3-2]：对象的缔造者（对象创建模式演进 + new 操作符底层四步曲 + 手写 myNew）。

返回总目录：戳这里

avatar
文章
阅读
粉丝