让人头痛的原型和原型链知识

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】持续每天分享更多前端和AI辅助前端编码新知识~~喜欢的就一起学反正开源至上，无所谓被诋毁被喷被质疑文章没有价值~~~坚持自己观点

写点笔记写点生活~写点经验。

在当前环境下，纯前端开发者可以通过技术深化、横向扩展、切入新兴领域以及产品化思维找到突破口。

原型和原型链总结

核心概念关系

对象与函数的关系
- 所有对象都是通过 new 函数 创建的。
- 函数本身也是对象（即"函数对象"），可以拥有属性。
原型（prototype）
- 定义：所有函数都有一个 prototype 属性，指向一个普通对象（函数原型）。
- 特点：
  - 默认包含 constructor 属性，指向构造函数自身（如 Func.prototype.constructor === Func）。
  - 用于存储由该构造函数创建的实例的共享属性和方法。
隐式原型（proto）
- 定义：所有对象都有一个 __proto__ 属性，指向创建该对象的构造函数的 prototype。
- 成员访问规则 ：
  1. 优先查找对象自身的成员。
  2. 若未找到，则通过 __proto__ 逐级向上查找原型链。
原型链
- 本质：由 __proto__ 串联起来的链式结构，决定对象成员的继承关系。
- 关键特性 ：
  - Function 的 __proto__ 指向自身的 prototype（即 Function.__proto__ === Function.prototype）。
  - Object.prototype 是原型链的终点，其 __proto__ 指向 null。

特殊机制与注意事项

猴子补丁（Monkey Patching）

通过修改函数原型（如 Array.prototype.myMethod = ...）动态扩展对象功能，但会污染全局原型链，需谨慎使用。
类型区分
- 函数对象 （如 Object, Function, 自定义函数）：既有 prototype 也有 __proto__。
- 普通对象 （如 {}, new 实例）：只有 __proto__，继承自构造函数的 prototype。

图示简化关系

plaintext 复制代码

实例对象 --__proto__--> 构造函数.prototype --__proto__--> Object.prototype --__proto__--> null  
↑  
| new  
构造函数 --prototype--> 构造函数.prototype  
构造函数.__proto__ --> Function.prototype  
Function.prototype.__proto__ --> Object.prototype  
Function.__proto__ --> Function.prototype

通过以上关系和规则，JavaScript 实现了基于原型链的继承机制，所有对象最终通过 __proto__ 连接到 Object.prototype，并最终指向 null。

基于JavaScript原型链的概念关系图，使用Mermaid语法表示：

关键关系说明：

原型链终点
Object.prototype.__proto__ → null
构造函数关系
- 所有函数（包括Object和Function）的 __proto__ 指向 Function.prototype
- 所有函数的 prototype 属性指向各自的原型对象
继承关系
- 自定义函数通过 new 创建的实例，其 __proto__ 指向构造函数的 prototype
- 原型对象的 __proto__ 默认指向 Object.prototype
类型区分
- 函数对象 （如 Function, Object, 自定义函数）有 prototype 属性
- 普通对象 （如 {} 或 new 创建的实例）只有 __proto__ 属性