如何向自定义构造函数的原型对象注入代码以作用于实例？

嘿，这事儿其实挺简单的——JavaScript的原型机制是动态的，只要你修改Item构造函数的原型对象，那些已经创建好的item1到item6实例会自动继承新的方法和属性，完全不用重新生成实例。下面给你具体的实现方式：

1. 直接给原型添加单个方法/属性 #

假设你想给所有Item实例加一个打印自身信息的方法，或者一个默认属性，直接修改Item.prototype就行：

示例：添加方法 #

// 给Item原型注入logInfo方法
Item.prototype.logInfo = function() {
  // 这里的this指向调用方法的实例本身
  const colorText = this.color ? `，颜色：${this.color}` : '';
  console.log(`我是Item实例：${this.name}${colorText}`);
};

// 现在所有已存在的实例都能调用这个方法
item1.logInfo(); // 输出：我是Item实例：list
item2.logInfo(); // 输出：我是Item实例：torso，颜色：#FF5C5C

示例：添加属性 #

// 给原型添加一个默认的激活状态属性
Item.prototype.isActive = false;

// 实例可以直接读取这个属性，也可以覆盖它（不会影响原型）
console.log(item3.isActive); // false（用原型的默认值）
item3.isActive = true;
console.log(item3.isActive); // true（实例自己的属性）
console.log(item4.isActive); // false（还是原型的默认值）

2. 批量注入多个内容 #

如果要一次性加多个方法或属性，用Object.assign来合并会更高效：

// 批量注入方法和属性到Item原型
Object.assign(Item.prototype, {
  // 切换激活状态的方法
  toggleActive: function() {
    this.isActive = !this.isActive;
    console.log(`${this.name} 的状态变为：${this.isActive ? '激活' : '未激活'}`);
  },
  // 修改颜色的方法
  updateColor: function(newColor) {
    this.color = newColor;
    console.log(`${this.name} 的颜色已更新为：${newColor}`);
  },
  // 一个默认的提示文本属性
  tipText: "这是一个Item菜单选项"
});

// 测试调用
item5.toggleActive(); // 输出：link 的状态变为：激活
item6.updateColor("#000000"); // 输出：blind 的颜色已更新为：#000000
console.log(item1.tipText); // 输出：这是一个Item菜单选项

重要提醒：不要直接替换原型！ #

千万别做这种操作：

// ❌ 错误做法：直接替换整个原型对象
Item.prototype = {
  logInfo: function() { ... }
};

item1.logInfo(); // 会报错！因为item1的__proto__还是指向原来的原型，和新原型没关系了

直接替换原型会切断现有实例和原型的关联，只有替换后新创建的实例才会用新原型。我们要做的是修改原原型对象，而不是替换它。

这样操作后，你所有已经创建的item1到item6实例，就能直接使用你注入到原型里的代码啦。

内容的提问来源于stack exchange，提问作者Jamal Rei