JavaScript 中 WeakMap 怎么实现状态机中对象的私有属性关联-js教程-PHP中文网

weakmap 可用于状态机中为对象关联私有状态且不阻止垃圾回收：其键为弱引用对象，值为对应状态，对象销毁时条目自动清理，兼具内存安全与封装性。

javascript 中 weakmap 怎么实现状态机中对象的私有属性关联

WeakMap 可以用来在状态机中为对象关联私有状态，而不会阻止对象被垃圾回收。核心思路是：用 WeakMap 存储“对象 → 状态”映射，键是状态机所管理的实例（如 DOM 元素、自定义对象），值是该实例当前的状态（如字符串、数字或对象）。因为 WeakMap 的键是弱引用，当目标对象不再被其他地方引用时，它能自动从 WeakMap 中被清理，避免内存泄漏。

用 WeakMap 管理状态机的私有状态

状态机通常需要为每个被管理的对象维护独立、不可外部访问的状态。WeakMap 天然适合这种场景——它不暴露键集合，无法遍历，且键必须是对象，正好对应“按对象隔离状态”的需求。

创建一个全局 WeakMap 实例，作为状态存储容器
状态变更时，只操作该 WeakMap，不往目标对象上挂属性（避免污染或被误改）
读取状态时，用目标对象作为 key 查 WeakMap；若未查到，可设默认值或触发初始化

一个轻量状态机示例：按钮点击状态流转

假设要实现一个按钮的“空闲 → 加载中 → 成功 → 空闲”循环状态，且状态不能被外部篡改：

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

const buttonState = new WeakMap();

class ButtonStateMachine {
  static STATES = { IDLE: 'idle', LOADING: 'loading', SUCCESS: 'success' };

  static getState(btn) {
    return buttonState.get(btn) || ButtonStateMachine.STATES.IDLE;
  }

  static setState(btn, state) {
    if (Object.values(ButtonStateMachine.STATES).includes(state)) {
      buttonState.set(btn, state);
      btn.setAttribute('data-state', state); // 可选：同步到 DOM
    }
  }

  static transition(btn, event) {
    const current = this.getState(btn);
    let next = current;

    if (current === ButtonStateMachine.STATES.IDLE && event === 'click') {
      next = ButtonStateMachine.STATES.LOADING;
    } else if (current === ButtonStateMachine.STATES.LOADING && event === 'success') {
      next = ButtonStateMachine.STATES.SUCCESS;
    } else if (current === ButtonStateMachine.STATES.SUCCESS) {
      next = ButtonStateMachine.STATES.IDLE;
    }

    this.setState(btn, next);
    return next;
  }
}

// 使用
const btn = document.getElementById('my-btn');
ButtonStateMachine.transition(btn, 'click'); // → loading
ButtonStateMachine.transition(btn, 'success'); // → success
console.log(ButtonStateMachine.getState(btn)); // 'success'
// 卸载 btn 后，WeakMap 中对应条目自动消失