巧妙运用WeakMap和Map：揭开秘境中的幽隐宝藏

2023-10-15 12:24:04

缘起于一篇关于深拷贝的博文，我对WeakMap的兴趣陡然生起，渴望透彻地剖析其内在的奥妙。然而，在踏上WeakMap的征途之前，我们必须先征服Map，因为它既是WeakMap的基石，又是开启WeakMap大门的钥匙。

Map，存储与关联的舞步

Map是JavaScript内置的对象，它提供了一种有效且便捷的方式来存储键值对，使我们能够轻松访问和操作数据。Map的妙处在于，它允许我们使用任意类型的数据作为键，包括对象、数组、函数，甚至其他Map。这意味着Map具有极佳的灵活性，能适应各种复杂的存储需求。

举个例子，我们有这样一个对象：

const user = {
  name: 'John Doe',
  age: 30,
  location: 'New York'
};

如果想存储这个对象并根据用户姓名进行查找，可以使用Map：

const users = new Map();
users.set(user.name, user);

现在，我们可以通过用户姓名轻松获取用户对象：

const foundUser = users.get('John Doe');
console.log(foundUser); // { name: 'John Doe', age: 30, location: 'New York' }

WeakMap，弱引用之舞

WeakMap与Map有着密切的联系，但也有着本质的区别。WeakMap同样允许我们存储键值对，但它采用的是弱引用。这意味着当键值对不再被其他变量引用时，WeakMap会自动释放键值对所占用的内存。这是一种非常巧妙的设计，能够有效防止内存泄漏。

以下场景，我们该如何巧妙运用Map和WeakMap，找出闭包泄漏问题呢？

首先使用Map来存储组件实例和其对应的事件监听器：

const componentInstances = new Map();

class MyComponent {
  constructor() {
    // 将组件实例存储在Map中，以组件ID作为键
    componentInstances.set(this.id, this);

    // 为组件添加事件监听器
    document.addEventListener('click', this.handleClick);
  }

  handleClick(event) {
    // 使用组件实例的ID作为键，从Map中获取组件实例
    const componentInstance = componentInstances.get(this.id);

    // 在这里，我们可以访问和操作组件实例
  }
}

然后使用WeakMap来存储组件实例和其对应的定时器：

const componentTimers = new WeakMap();

class MyComponent {
  constructor() {
    // 将组件实例存储在WeakMap中，以组件ID作为键
    componentTimers.set(this, setTimeout(() => {
      // 在这里，我们可以访问和操作组件实例
    }, 1000));
  }
}