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

鱼樱前端
165 阅读2分钟

大家好，我是鱼樱！！！

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

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

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

原型和原型链总结

核心概念关系

  1. 对象与函数的关系

    • 所有对象都是通过 new 函数 创建的。
    • 函数本身也是对象（即“函数对象”），可以拥有属性。

  2. 原型（prototype）

    • 定义：所有函数都有一个 prototype 属性，指向一个普通对象（函数原型）。
    • 特点：
      • 默认包含 constructor 属性，指向构造函数自身（如 Func.prototype.constructor === Func）。
      • 用于存储由该构造函数创建的实例的共享属性和方法。

  3. 隐式原型（__proto__）

    • 定义：所有对象都有一个 __proto__ 属性，指向创建该对象的构造函数的 prototype。
    • 成员访问规则：
      1. 优先查找对象自身的成员。
      2. 若未找到，则通过 __proto__ 逐级向上查找原型链。

  4. 原型链

    • 本质：由 __proto__ 串联起来的链式结构，决定对象成员的继承关系。
    • 关键特性：
      • Function 的 __proto__ 指向自身的 prototype（即 Function.__proto__ === Function.prototype）。
      • Object.prototype 是原型链的终点，其 __proto__ 指向 null。

特殊机制与注意事项

  • 猴子补丁（Monkey Patching）
    通过修改函数原型（如 Array.prototype.myMethod = ...）动态扩展对象功能，但会污染全局原型链，需谨慎使用。

  • 类型区分

    • 函数对象（如 Object, Function, 自定义函数）：既有 prototype 也有 __proto__。
    • 普通对象（如 {}, new 实例）：只有 __proto__，继承自构造函数的 prototype。

图示简化关系

实例对象 --__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语法表示：

  graph TD
    null[null] -->|原型终点| Object.prototype
    Object.prototype -->|__proto__| null
    
    Function.prototype -->|__proto__| Object.prototype
    Object -->|prototype| Object.prototype
    Object -->|__proto__| Function.prototype
    
    Function -->|prototype| Function.prototype
    Function -->|__proto__| Function.prototype
    
    自定义函数 -->|prototype| 自定义函数原型[自定义函数.prototype]
    自定义函数 -->|__proto__| Function.prototype
    自定义函数原型 -->|__proto__| Object.prototype
    
    new -->|创建实例| 自定义对象实例
    自定义对象实例 -->|__proto__| 自定义函数原型
    
    函数对象 -->|__proto__| Function.prototype
    普通对象 -->|__proto__| Object.prototype

    classDef obj fill:#f9f,stroke:#333;
    classDef func fill:#9f9,stroke:#333;
    classDef proto fill:#ff9,stroke:#333;
    
    class Object,Function,自定义函数,函数对象 func;
    class Object.prototype,Function.prototype,自定义函数原型 proto;
    class 自定义对象实例,普通对象 obj;

关键关系说明：

  1. 原型链终点
    Object.prototype.__proto__ → null

  2. 构造函数关系

    • 所有函数（包括Object和Function）的 __proto__ 指向 Function.prototype
    • 所有函数的 prototype 属性指向各自的原型对象

  3. 继承关系

    • 自定义函数通过 new 创建的实例，其 __proto__ 指向构造函数的 prototype
    • 原型对象的 __proto__ 默认指向 Object.prototype

  4. 类型区分

    • 函数对象（如 Function, Object, 自定义函数）有 prototype 属性
    • 普通对象（如 {} 或 new 创建的实例）只有 __proto__ 属性
avatar
文章
阅读
粉丝