原型共享的核心是将方法挂载到构造函数的 prototype 上,使所有实例通过 proto 链共享同一份方法;实例自身属性优先于原型属性,删除实例属性后原型方法自动生效。
核心思路很直接:把不变的方法统一挂到构造函数的 prototype 上,让所有实例通过 __proto__ 链自动找到它,只存一份代码,却能被无数对象调用。
把方法从构造函数里“搬”到 prototype 上
构造函数内部定义方法,每次 new 都会新建一份,浪费内存。改成挂到原型上,就真正实现共享:
- 错误写法(每个实例独占一份):
function Person(name) { this.name = name; this.say = function() { console.log(name); } } - 正确写法(所有实例共用一份):
function Person(name) { this.name = name; }
Person.prototype.say = function() { console.log(this.name); };
验证很简单:new Person('a').say === new Person('b').say 返回 true,说明指向同一个函数对象。
理解 __proto__ 与 prototype 的对应关系
每个实例对象都有一个隐式属性 __proto__,它自动指向其构造函数的 prototype 对象。这个链接就是共享的物理基础:
const p = new Person('Tom');-
p.__proto__ === Person.prototype→ true -
p.say()实际是沿着p → p.__proto__ → Person.prototype找到say并执行
不需要手动设置 __proto__,JS 引擎在 new 时已自动完成绑定。
注意属性/方法查找的优先级规则
共享不等于覆盖。当实例自身有同名成员时,它会“遮蔽”原型上的同名成员:
- 如果
p.say = function() { console.log('own'); },再调p.say()就不会走原型链 - 想临时绕过实例、强制调原型方法,可用:
Person.prototype.say.call(p) - 删掉实例属性后,原型上的方法会自然“浮现”:
delete p.say;再调p.say()就恢复走原型
延伸:多层原型链支持更灵活的复用结构
原型本身也是对象,它也有自己的 __proto__,可继续向上链接。例如:
Person.prototype.__proto__ === Object.prototype- 所以
p.toString()虽然没定义在Person.prototype,但能通过原型链一路找到Object.prototype.toString - 这种层级结构让继承、扩展、兜底行为成为可能,也是 Vue/React 内部组件方法共享的基础机制之一

















