类字面量实例化DOM元素后posX/posY获取失败问题咨询

问题根源 #

你遇到的wall.posX返回undefined的原因很直接——你在constructor里用let声明的posX和posY是构造函数的局部变量，并没有挂载到类的实例上。只有绑定到this上的属性，才能通过实例（比如wall）直接访问。

修复方案 #

要解决这个问题，只需要把位置属性挂载到类实例上，同时结合实际场景（元素位置可能动态变化）优化代码，让位置数据既能初始化绑定，也能实时获取最新值：

修改后的JavaScript代码

class ObjectScene {
  constructor(element) {
    this.element = element;
    // 将位置属性绑定到实例，初始化时获取元素初始位置
    this.posX = this.element.offsetLeft;
    this.posY = this.element.offsetTop;
  }

  // 可选：用getter方法实时获取元素当前的最新位置
  get currentPosX() {
    return this.element.offsetLeft;
  }

  get currentPosY() {
    return this.element.offsetTop;
  }

  resetWall() {
    this.element.style.left = 'unset';
    this.element.style.right = '0px';
    // 重置后更新实例的位置属性，保证数据与元素实际状态同步
    this.posX = this.element.offsetLeft;
    this.posY = this.element.offsetTop;
  }
}

const wall = new ObjectScene(document.getElementById('wall'));
console.log(wall.posX); // 现在能正确输出初始化时的X位置
console.log(wall.currentPosX); // 调用getter获取实时的X位置

HTML代码（保持不变）

<div class="wall" id="wall"></div>

方案说明 #

1. 访问权限修正：通过this.posX把变量绑定到实例后，外部就能直接访问这些属性，解决了undefined的问题。
2. 动态位置同步：添加currentPosX/currentPosY的getter，是因为元素位置可能在初始化后发生变化（比如窗口 resize、其他JS修改样式），getter可以每次调用都返回最新的位置值。
3. DRY原则落地：这个类可以复用给任意DOM元素——你只需要创建新的ObjectScene实例并传入不同元素，每个实例都会自动拥有位置管理和重置逻辑，完全避免了重复代码。

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