我们是由枫哥组建的IT技术团队成立于2017年致力于帮助IT从业者提供实力成功入职理想企业我们提供一对一学习辅导由知名大厂导师指导分享Java技术、参与项目实战等服务并为学员定制职业规划全面提升竞争力过去8年我们已成功帮助数千名求职者拿到满意的OfferIT枫斗者、IT枫斗者-Java面试突击。 前言别再死背原型链公式了绝大多数前端开发者学习原型、原型链都停留在背诵等式、套用人畜无害的类比阶段比如记住实例.__proto__ 构造函数.prototype却根本不知道内存中发生了什么、V8引擎如何查找属性、原型为何能实现复用。面试时只要面试官深挖底层原型属性为何不会被实例修改原型链查找的底层流程Function 自引用的本质瞬间翻车。本文摒弃所有通俗类比直击V8引擎底层从堆内存分配、对象引用、属性查找算法三个核心维度彻底拆解原型与原型链的真实底层逻辑一次性吃透JS面向对象的核心根基一、显式原型 prototype函数专属的「共享内存模板」很多人混淆一个核心知识点prototype 不是所有对象都有是函数的专属属性普通对象只有隐式原型只有Function 类型对象构造函数拥有显式原型prototype它是JS实现实例方法/属性共享、节省内存的核心设计。1.1 V8内存分配机制函数定义即创建原型对象当我们声明一个自定义构造函数时function Foo() {}V8引擎会自动在堆内存中开辟一块独立空间创建一个空白原型对象并让Foo.prototype精准指向这块内存地址。这也是原型复用的底层核心所有实例共享同一块原型内存空间无需重复开辟内存。1.2 实例属性 vs 原型属性内存存储完全隔离我们通过代码直观区分两种属性的存储位置看懂内存隔离逻辑functionFoo(name){// 挂载到【实例自身内存空间】每个实例独立拥有this.namename;}// 挂载到【Foo原型内存空间】所有实例共享这一份内存Foo.prototype.walkfunction(){console.log(this.name is walking);};constf1newFoo(张三);constf2newFoo(李四);内存真相f1.name、f2.name存储在各自实例的私有内存相互独立修改互不影响f1.walk、f2.walk指向同一个原型内存地址全局唯一极致节省内存1.3 核心读写隔离机制高频面试考点JS 原型有一个关键底层保护机制读穿透、写隔离读取操作实例自身无该属性时会向上查找原型链读取原型属性赋值操作通过实例赋值f1.walk xxx时只会在实例自身新增属性绝对不会修改原型内存中的方法这套机制完美保障了原型共享属性的稳定性避免单个实例篡改原型影响所有实例。二、隐式原型protoV8的属性查找通道如果说prototype是「共享模板」那__proto__规范内部槽[[Prototype]]就是 JS 的向上查找指针。所有对象除了null诞生时V8 都会自动为其绑定[[Prototype]]内部槽用于指向自己的父原型对象这是原型链能串联的底层基础。2.1 V8底层属性查找算法原生执行流程当执行obj.key访问属性时V8 不会遍历对象键值对而是执行一套固定内存查找逻辑自有属性校验优先检索当前对象自身的内存属性表命中则直接返回终止查找原型跳转检索未命中则通过obj.__proto__指针跳转到父原型内存地址继续查找递归终止循环向上查找直到匹配属性或查找到原型链终点null返回undefined2.2 核心内存等式底层本质使用new创建实例时V8 会完成关键内存绑定constfnewFoo();// 核心实例隐式原型 与 构造函数显式原型 指向【同一块堆内存】f.__proto__Foo.prototype;// true这行代码是整个JS继承体系的基石本质是内存地址的引用复用而非数据拷贝。三、原型链完整链路内存引用的单向链表原型链的本质由对象内存引用指针组成的单向链表所有对象最终都会溯源到Object.prototype。3.1 普通实例完整溯源链路以const f1 new Foo()为例完整内存查找链路第一层f1自身私有属性第二层f1.__proto__→Foo.prototype自定义原型第三层f1.__proto__.__proto__→Object.prototype顶级原型终点f1.__proto__.__proto__.__proto__→null链表终止3.2 全网最难懂Function 特殊自引用底层原理JS 中函数也是对象既拥有构造函数的prototype也拥有对象的__proto__诞生了最特殊的自引用设计// 1. 自定义函数由 Function 构造生成Foo.__proto__Function.prototype;// true// 2. 终极自引用Function 自身由自己构造Function.__proto__Function.prototype;// true// 3. 所有原型最终归属于 Object 顶级原型Function.prototype.__proto__Object.prototype;// true底层解读JS 引擎为 Function 做了特殊兼容让其可以自我实例化成为所有函数对象的顶层构造者也是原型链闭环的核心设计。四、三维度吃透原型链彻底告别模糊认知从三个底层维度总结原型与原型链的核心职责精准区分易混淆概念1. 构造维度prototype绑定在构造函数上定义当前构造函数所有实例可继承的属性和方法是继承的「数据源」。2. 查找维度proto绑定在所有对象上是V8属性查找的「路径指针」决定对象向上溯源的完整链路。3. 连接维度constructor原型对象自带的回溯属性建立原型对象 → 构造函数的反向关联实现溯源匹配。五、底层设计终极意义很多人学完原型链仍不知道其设计初衷核心只有两点极致内存优化通过内存引用复用替代传统的属性拷贝海量实例共享一套原型方法大幅降低内存占用委托式继承JS 没有传统类的继承机制依靠「原型链委托查找」实现轻量、灵活的面向对象编程六、文末总结prototype函数专属共享模板决定实例能继承什么proto对象专属查找指针决定属性向上查找路径原型链对象引用组成的单向链表终点为 null读写隔离实例只读原型属性不篡改原型保障全局稳定核心本质基于V8内存引用的委托机制是JS面向对象的底层基石⭐️推荐:Offer训练营介绍Java 面试 后端通用面试八股文Java后端企业级实战面试Java后端校招算法学习
颠覆认知！JS原型与原型链底层原理：从V8内存视角彻底拆解（告别死记硬背）
我们是由枫哥组建的IT技术团队成立于2017年致力于帮助IT从业者提供实力成功入职理想企业我们提供一对一学习辅导由知名大厂导师指导分享Java技术、参与项目实战等服务并为学员定制职业规划全面提升竞争力过去8年我们已成功帮助数千名求职者拿到满意的OfferIT枫斗者、IT枫斗者-Java面试突击。 前言别再死背原型链公式了绝大多数前端开发者学习原型、原型链都停留在背诵等式、套用人畜无害的类比阶段比如记住实例.__proto__ 构造函数.prototype却根本不知道内存中发生了什么、V8引擎如何查找属性、原型为何能实现复用。面试时只要面试官深挖底层原型属性为何不会被实例修改原型链查找的底层流程Function 自引用的本质瞬间翻车。本文摒弃所有通俗类比直击V8引擎底层从堆内存分配、对象引用、属性查找算法三个核心维度彻底拆解原型与原型链的真实底层逻辑一次性吃透JS面向对象的核心根基一、显式原型 prototype函数专属的「共享内存模板」很多人混淆一个核心知识点prototype 不是所有对象都有是函数的专属属性普通对象只有隐式原型只有Function 类型对象构造函数拥有显式原型prototype它是JS实现实例方法/属性共享、节省内存的核心设计。1.1 V8内存分配机制函数定义即创建原型对象当我们声明一个自定义构造函数时function Foo() {}V8引擎会自动在堆内存中开辟一块独立空间创建一个空白原型对象并让Foo.prototype精准指向这块内存地址。这也是原型复用的底层核心所有实例共享同一块原型内存空间无需重复开辟内存。1.2 实例属性 vs 原型属性内存存储完全隔离我们通过代码直观区分两种属性的存储位置看懂内存隔离逻辑functionFoo(name){// 挂载到【实例自身内存空间】每个实例独立拥有this.namename;}// 挂载到【Foo原型内存空间】所有实例共享这一份内存Foo.prototype.walkfunction(){console.log(this.name is walking);};constf1newFoo(张三);constf2newFoo(李四);内存真相f1.name、f2.name存储在各自实例的私有内存相互独立修改互不影响f1.walk、f2.walk指向同一个原型内存地址全局唯一极致节省内存1.3 核心读写隔离机制高频面试考点JS 原型有一个关键底层保护机制读穿透、写隔离读取操作实例自身无该属性时会向上查找原型链读取原型属性赋值操作通过实例赋值f1.walk xxx时只会在实例自身新增属性绝对不会修改原型内存中的方法这套机制完美保障了原型共享属性的稳定性避免单个实例篡改原型影响所有实例。二、隐式原型protoV8的属性查找通道如果说prototype是「共享模板」那__proto__规范内部槽[[Prototype]]就是 JS 的向上查找指针。所有对象除了null诞生时V8 都会自动为其绑定[[Prototype]]内部槽用于指向自己的父原型对象这是原型链能串联的底层基础。2.1 V8底层属性查找算法原生执行流程当执行obj.key访问属性时V8 不会遍历对象键值对而是执行一套固定内存查找逻辑自有属性校验优先检索当前对象自身的内存属性表命中则直接返回终止查找原型跳转检索未命中则通过obj.__proto__指针跳转到父原型内存地址继续查找递归终止循环向上查找直到匹配属性或查找到原型链终点null返回undefined2.2 核心内存等式底层本质使用new创建实例时V8 会完成关键内存绑定constfnewFoo();// 核心实例隐式原型 与 构造函数显式原型 指向【同一块堆内存】f.__proto__Foo.prototype;// true这行代码是整个JS继承体系的基石本质是内存地址的引用复用而非数据拷贝。三、原型链完整链路内存引用的单向链表原型链的本质由对象内存引用指针组成的单向链表所有对象最终都会溯源到Object.prototype。3.1 普通实例完整溯源链路以const f1 new Foo()为例完整内存查找链路第一层f1自身私有属性第二层f1.__proto__→Foo.prototype自定义原型第三层f1.__proto__.__proto__→Object.prototype顶级原型终点f1.__proto__.__proto__.__proto__→null链表终止3.2 全网最难懂Function 特殊自引用底层原理JS 中函数也是对象既拥有构造函数的prototype也拥有对象的__proto__诞生了最特殊的自引用设计// 1. 自定义函数由 Function 构造生成Foo.__proto__Function.prototype;// true// 2. 终极自引用Function 自身由自己构造Function.__proto__Function.prototype;// true// 3. 所有原型最终归属于 Object 顶级原型Function.prototype.__proto__Object.prototype;// true底层解读JS 引擎为 Function 做了特殊兼容让其可以自我实例化成为所有函数对象的顶层构造者也是原型链闭环的核心设计。四、三维度吃透原型链彻底告别模糊认知从三个底层维度总结原型与原型链的核心职责精准区分易混淆概念1. 构造维度prototype绑定在构造函数上定义当前构造函数所有实例可继承的属性和方法是继承的「数据源」。2. 查找维度proto绑定在所有对象上是V8属性查找的「路径指针」决定对象向上溯源的完整链路。3. 连接维度constructor原型对象自带的回溯属性建立原型对象 → 构造函数的反向关联实现溯源匹配。五、底层设计终极意义很多人学完原型链仍不知道其设计初衷核心只有两点极致内存优化通过内存引用复用替代传统的属性拷贝海量实例共享一套原型方法大幅降低内存占用委托式继承JS 没有传统类的继承机制依靠「原型链委托查找」实现轻量、灵活的面向对象编程六、文末总结prototype函数专属共享模板决定实例能继承什么proto对象专属查找指针决定属性向上查找路径原型链对象引用组成的单向链表终点为 null读写隔离实例只读原型属性不篡改原型保障全局稳定核心本质基于V8内存引用的委托机制是JS面向对象的底层基石⭐️推荐:Offer训练营介绍Java 面试 后端通用面试八股文Java后端企业级实战面试Java后端校招算法学习
