Vue 中理解__proto__和prototype
Vue 中__proto__与prototype的关联与应用全解析
Vue 实例（vm/根实例、vc/组件实例）的能力继承体系完全基于 JavaScript 原型链机制，而__proto__和prototype是原型链的核心载体。本文先夯实原生 JS 中二者的本质区别，再分 Vue 2/Vue 3 拆解其在 Vue 中的关联逻辑、底层实现，最后结合实际开发场景讲解应用与避坑要点。
一、基础铺垫：JS 原生中__proto__与prototype的核心区别
要理解 Vue 中的关联逻辑，需先掌握原生 JavaScript 中二者的本质——prototype是构造函数的“能力仓库”，__proto__是实例的“原型导航指针”。
1. 核心定义与归属
| 概念 | 归属对象 | 本质/类型 | 核心作用 | 核心特点 |
|---|---|---|---|---|
prototype | 仅函数（构造函数） | 普通对象（原型对象） | 存放“供所有实例继承的公共属性/方法”，是构造函数的“原型仓库” | 仅函数拥有；默认包含constructor（指向构造函数本身） |
__proto__ | 所有对象（含函数/实例） | 原型指针（内置属性） | 连接实例与构造函数的prototype，实现原型链查找（实例自身无属性时向上查找） | 所有对象拥有；ES6 标准化，不建议手动修改 |
2. 原生 JS 基础示例（理解核心关联）
// 1. 构造函数（拥有 prototype 仓库）functionPerson(name){this.name=name;// 实例私有属性}// 往 prototype 仓库添加公共方法（所有实例共享）Person.prototype.sayHi=function(){console.log(`Hi,${this.name}`);};// 2. 创建实例（只有 __proto__，无 prototype）constp1=newPerson('张三');constp2=newPerson('李四');// 3. 核心关联：实例.__proto__ === 构造函数.prototypeconsole.log(p1.__proto__===Person.prototype);// trueconsole.log(p2.sayHi===p1.sayHi);// true（共享仓库方法）// 4. 原型链查找：实例 → __proto__ → prototype → 上层 prototype// p1 自身无 toString → 找 p1.__proto__（Person.prototype）→ 无 → 找 p1.__proto__.__proto__（Object.prototype）→ 找到console.log(p1.toString()===Object.prototype.toString.call(p1));// true// 5. 原型链终点：Object.prototype.__proto__ = nullconsole.log(Object.prototype.__proto__);// null3. 核心结论（原生 JS）
- 实例通过
__proto__指向构造函数的prototype，从而继承公共属性/方法； prototype是“仓库”，__proto__是“导航”，二者共同构成原型链；- 所有原型链最终指向
Object.prototype.__proto__（值为null）。
二、Vue 中的核心构造函数（关联的前提）
Vue 内部通过两个核心构造函数支撑实例体系（Vue 2 清晰区分，Vue 3 微调），其prototype是 Vue 实例能力的核心载体：