【高频考点精讲】JavaScript中的享元模式：从对象池到性能优化

JavaScript中的享元模式：从对象池到性能优化

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊前端性能优化中一个容易被忽视但极其重要的设计模式——享元模式(Flyweight Pattern)。这个模式听起来有点高大上，但其实理解起来并不难，而且在实际项目中特别实用。

什么是享元模式？

想象一下你去网吧打游戏，100台电脑配置都一样，如果给每台电脑都装一套《英雄联盟》，那得多占硬盘空间啊！聪明的网管会把游戏装在服务器上，所有电脑共享同一份游戏文件——这就是享元模式的精髓：共享相同部分，节省资源。

在JavaScript中，享元模式通过共享大量细粒度对象中的相同部分，来减少内存消耗和提高性能。它特别适合处理需要创建大量相似对象的场景。

代码示例：从普通实现到享元优化

先看一个没优化的例子，假设我们要渲染一片森林，每棵树都有品种、坐标、高度等属性：

// 普通实现 - 每棵树都是独立对象
class Tree {
   
  constructor(type, x, y, height) {
   
    this.type = type;   // 树种
    this.x = x;         // x坐标
    this.y = y;         // y坐标 
    this.height = height; // 高度
    // 全栈老李提示：这里每个Tree实例都会占用独立内存
  }
  
  draw() {
   
    console.log(`在(${
     this.x},${
     this.y})绘制一棵${
     this.height}米高的${
     this.type}`);
  }
}

// 创建10000棵树 - 内存爆炸！
const forest = [];
for (let i = 0; i < 10000; i++) {
   
  const type = Math.random() >