JavaScript类属性与事件监听问题：构造函数外self作用域失效

你遇到的核心问题是作用域绑定错误——之前在构造函数内定义的self仅在构造函数内部有效，事件回调或外部代码无法访问到这个变量，导致提取属性时拿到undefined。下面是几种直接可行的解决方案：

1. 直接从已实例化的Ship对象提取属性 #

先创建Ship实例，再在事件处理逻辑中直接引用实例的属性，结合事件目标的id生成shipObj：

// 定义Ship类
class Ship {
  constructor(type, length, orientation) {
    this.type = type;
    this.length = length;
    this.orientation = orientation;
  }
}

// 创建Ship实例
const patrolBoat = new Ship('patrol-boat', 2, 'vertical');

// 事件处理函数
function onShipClick(event) {
  const shipObj = {
    id: event.target.id,
    type: patrolBoat.type,
    length: patrolBoat.length,
    orientation: patrolBoat.orientation
  };
  // 此时shipObj的属性都能正确取值
  console.log(shipObj);
}

// 绑定事件
document.getElementById('ship-element').addEventListener('click', onShipClick);

2. 在Ship类内部绑定事件处理逻辑 #

如果需要让Ship实例自己处理事件并生成shipObj，可以通过绑定this指向或使用箭头函数来确保作用域正确：

方法A：使用bind绑定this #

class Ship {
  constructor(type, length, orientation) {
    this.type = type;
    this.length = length;
    this.orientation = orientation;
    // 将事件处理方法的this绑定到当前实例
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const shipObj = {
      id: event.target.id,
      type: this.type,
      length: this.length,
      orientation: this.orientation
    };
    console.log(shipObj);
  }
}

// 使用示例
const battleShip = new Ship('battleship', 4, 'horizontal');
document.getElementById('battleship-element').addEventListener('click', battleShip.handleClick);

方法B：使用箭头函数作为类方法（ES6+） #

箭头函数会自动继承外层作用域的this，无需手动绑定：

class Ship {
  constructor(type, length, orientation) {
    this.type = type;
    this.length = length;
    this.orientation = orientation;
  }

  // 箭头函数自动绑定实例的this
  handleClick = (event) => {
    const shipObj = {
      id: event.target.id,
      type: this.type,
      length: this.length,
      orientation: this.orientation
    };
    console.log(shipObj);
  }
}

3. 给Ship类添加生成shipObj的方法 #

如果需要更灵活地生成shipObj，可以给Ship类添加一个专门的方法，传入事件目标id即可返回目标对象：

class Ship {
  constructor(type, length, orientation) {
    this.type = type;
    this.length = length;
    this.orientation = orientation;
  }

  createShipObj(targetId) {
    return {
      id: targetId,
      type: this.type,
      length: this.length,
      orientation: this.orientation
    };
  }
}

// 使用示例
const submarine = new Ship('submarine', 3, 'horizontal');
// 假设从事件中拿到id
const targetId = 'submarine-1';
const shipObj = submarine.createShipObj(targetId);
console.log(shipObj);

核心思路就是确保访问实例属性时，当前作用域能正确指向Ship类的实例，避免因作用域隔离导致属性无法访问。

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