浅拷贝用于固化 getboundingclientrect() 返回的 domrect 对象,防止后续修改污染原始引用;推荐用 {...rect} 或 object.assign({}, rect) 仅拷贝顶层坐标属性。

浅拷贝在 Tooltip 定位中不是用来“复制位置信息”的核心手段,而是防止意外修改原始 DOM 节点的 getBoundingClientRect() 返回对象(该对象是普通对象,属性可写)。真正关键的是:获取位置后立即用浅拷贝固化坐标值,避免后续 DOM 变化导致定位错乱。
为什么需要浅拷贝触发节点的位置对象?
Element.getBoundingClientRect() 返回一个 DOMRect 对象,它虽是只读接口,但在某些旧环境或被 polyfill 修改后,其属性可能被意外覆盖;更常见的是,开发者在计算 Tooltip 偏移时直接给这个对象加字段(如 rect.tooltipTop = ...),会污染原始引用——如果同一节点多次触发 Tooltip,或该节点被复用(如列表项),后续调用会拿到被篡改的坐标。
如何正确做浅拷贝?
推荐使用对象展开语法或 Object.assign(),只拷贝顶层属性(left, top, width, height, right, bottom, x, y):
-
✅ 推荐(简洁安全):
const pos = { ...triggerEl.getBoundingClientRect() }; -
✅ 兼容性更好:
const pos = Object.assign({}, triggerEl.getBoundingClientRect()); -
❌ 避免直接赋值:
const pos = triggerEl.getBoundingClientRect(); // 引用未断开 -
❌ 不要用 JSON 方法:
JSON.parse(JSON.stringify(...))会丢失DOMRect的原型方法且无法处理NaN或函数。
结合 Tooltip 定位的典型用法
拷贝后即可自由计算,不担心影响其他逻辑:
- 基于
pos.top和pos.left计算 Tooltip 的top/left样式; - 用
pos.width判断是否超出视口右侧,触发右对齐; - 将
pos存入 Tooltip 实例缓存,下次 hover 时对比是否需重新测量(如节点尺寸已变)。
额外提醒:浅拷贝 ≠ 深拷贝,够用即可
DOMRect 是扁平对象,无嵌套属性,浅拷贝完全满足需求。不需要 structuredClone 或第三方库。若未来扩展需保存自定义元数据(如 pos.source = 'hover'),也只需在拷贝后的对象上添加,不影响原始节点。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











