如何从DOM元素引用关联的JavaScript类实例？

你示例里直接在DOM元素上挂载自定义属性存类实例的写法完全可以正常运行——DOM节点本质就是JS宿主对象，本身支持扩展自定义属性存储任意类型的值，包括类实例引用。

不过这种写法有几个需要留意的坑：

• 不要使用DOM原生已经占用的属性名，比如id、classList、onchange这类，覆盖原生逻辑很容易引发难以排查的bug，自定义属性名建议加上项目专属前缀，比如_myApp_formInstance，最大程度避免命名冲突
• 直接挂载在元素上的自定义属性是可枚举的，后续如果遍历元素属性，记得把这类自定义挂载的属性过滤掉，不要和原生属性混在一起处理
• 如果元素会被动态移除，记得手动清掉挂载的实例引用，不然引用一直存在会导致内存泄漏，实例无法被垃圾回收机制回收。

更稳妥的实现方案 #

用WeakMap做元素-实例映射 #

这是目前业内最推荐的写法，完全不会污染DOM对象，还能天然规避内存泄漏问题：

// 模块内维护一个WeakMap，key为DOM元素，value为绑定的类实例
const compInstanceMap = new WeakMap();

// 绑定逻辑
const myInstance = new MyComponent();
const targetEl = document.createElement('div');
compInstanceMap.set(targetEl, myInstance);

// 取实例调用
compInstanceMap.get(targetEl).init();

WeakMap的键是弱引用，只要DOM元素被移除、没有其他地方持有这个元素的引用，对应的键值对会被垃圾回收自动清理，不需要手动写解绑逻辑，也不会出现属性名冲突的问题。

用data属性配合实例池存储 #

如果你需要在DOM结构上直观看到绑定关系方便调试，可以给每个实例分配唯一ID，把ID存在元素的data-*属性上，实例统一存在模块级的实例池里：

const instancePool = Object.create(null);
let autoId = 0;

// 绑定逻辑
const myInstance = new MyComponent();
const instanceId = `comp_${autoId++}`;
instancePool[instanceId] = myInstance;

const targetEl = document.createElement('div');
targetEl.dataset.compId = instanceId;

// 取实例调用
const matchedInstance = instancePool[targetEl.dataset.compId];
matchedInstance.init();

这种方案调试成本低，在浏览器Elements面板里直接就能看到元素绑定的实例ID，缺点是元素销毁的时候要手动清理实例池里对应的引用，不然会有内存泄漏。

另外补充下你提到的两种常见方案的局限：

• 直接把实例存在data-*属性里是行不通的，data属性只能存字符串，传对象进去会被自动转成[object Object]，拿不到原始实例
• 靠事件监听绑定实例逻辑耦合度太高，只适合事件触发的场景，单纯用来存引用完全没必要，后续维护成本很高。

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