JavaScript中原型继承中引用类型属性共享的隐患-js教程-PHP中文网

引用类型在原型上定义会导致所有实例共享同一份内存地址。例如Animal.prototype.hobbies=['sleep','eat']，dog和cat实例修改会相互影响；应改在构造函数内初始化或用getter返回新副本。

javascript中原型继承中引用类型属性共享的隐患

在JavaScript原型继承中，如果父构造函数的原型上定义了引用类型属性（如数组、对象、函数等），所有子实例会共享这个引用。这不是设计缺陷，而是原型链机制的自然结果——但极易引发隐性bug。

为什么引用类型会在实例间共享

因为原型对象是被所有实例共用的。当一个引用类型值被定义在Parent.prototype上时，它只有一份内存地址，所有通过new Parent()或继承自它的子类实例，访问的都是同一个对象。

例如：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function Animal() {}
Animal.prototype.hobbies = ['sleep', 'eat']; // 引用类型挂载在原型上

const dog = new Animal();
const cat = new Animal();

dog.hobbies.push('bark');
console.log(cat.hobbies); // ['sleep', 'eat', 'bark'] ← 意外被修改！

常见踩坑场景

原型上声明空数组作为默认容器：比如items = []用于收集子项，结果多个实例互相污染
缓存对象或状态对象挂在原型上：如cache = {}，后续实例读写都操作同一份
事件监听器列表用数组维护：不同实例绑定/解绑时误操作他人监听器
子类未重写而直接修改父类原型属性：看似安全的操作，在多实例下暴露共享本质

如何安全地初始化引用类型

在构造函数内部初始化：确保每个实例拥有独立副本
this.hobbies = ['sleep', 'eat'];
使用getter动态返回新引用（适合只读或需懒初始化）：
get hobbies() { return ['sleep', 'eat']; }
在实例方法中按需创建：避免提前分配，也规避共享风险
this.getHobbies = () => [...this.constructor.prototype._defaultHobbies];
ES6 class中避免在prototype字面量里写引用值：类字段提案（field = []）是实例级的，更安全