原型链实现共享与内存优化技巧

本文深入解析了JavaScript中原型链如何实现方法共享与内存优化的核心机制，强调将不变的方法统一挂载到构造函数的prototype上，使所有实例通过__proto__链共享同一份函数代码，避免每次new时重复创建而造成内存浪费；同时阐明了实例属性优先于原型属性的查找规则、遮蔽与恢复机制，以及多层原型链如何支撑继承、兜底调用和框架级复用，帮助开发者写出更高效、可维护的面向对象代码。

核心思路很直接：把不变的方法统一挂到构造函数的 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 内部组件方法共享的基础机制之一

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。