如何在JavaScript对象方法中获取实例变量名以绑定DOM事件处理程序？

你提到的硬编码实例变量名（比如ip）确实是个笨拙的方案，不仅维护性差（如果实例变量名改了或者创建多个实例就失效了），还不够优雅。下面给你几个更靠谱的解决方案，既能传递DOM元素，又能正确指向IconPicker实例：

方案1：使用addEventListener绑定事件（推荐） #

不要用内联的onClick属性，而是在创建img元素时用JavaScript动态绑定事件，这样可以通过闭包保留实例的引用，同时拿到DOM元素：

IconPicker.prototype.buildIt = function(divName) {
  const container = document.getElementById(divName);
  container.innerHTML = ''; // 清空容器

  // 假设你有一个图标列表数组
  const icons = ['icon1.png', 'icon2.png', 'icon3.png'];
  
  icons.forEach(iconSrc => {
    const img = document.createElement('img');
    img.src = iconSrc;
    // 其他属性设置（比如class、alt等）

    // 用闭包保留实例引用
    const self = this;
    img.addEventListener('click', function() {
      // 这里的`this`是被点击的img元素，传给imageClicked
      self.imageClicked(this);
    });

    // 同理绑定mouseover和mouseout事件
    img.addEventListener('mouseover', function() {
      self.imageHovered(this);
    });
    img.addEventListener('mouseout', function() {
      self.imageOut(this);
    });

    container.appendChild(img);
  });
};

// 事件处理方法示例
IconPicker.prototype.imageClicked = function(ctrl) {
  console.log('被点击的图标DOM元素：', ctrl);
  console.log('当前IconPicker实例：', this); // 这里的this指向IconPicker实例
};

这种方法完全脱离内联事件，代码更模块化，还支持多个IconPicker实例同时存在，不会互相干扰。

方案2：用bind绑定this并通过事件对象获取DOM元素 #

如果想简化代码，可以用bind把实例的this绑定到处理方法上，然后通过事件对象的target属性获取触发事件的DOM元素：

IconPicker.prototype.buildIt = function(divName) {
  const container = document.getElementById(divName);
  container.innerHTML = '';

  const icons = ['icon1.png', 'icon2.png', 'icon3.png'];
  
  icons.forEach(iconSrc => {
    const img = document.createElement('img');
    img.src = iconSrc;

    // 绑定方法，同时固定this为IconPicker实例
    img.addEventListener('click', this.imageClicked.bind(this));
    img.addEventListener('mouseover', this.imageHovered.bind(this));
    img.addEventListener('mouseout', this.imageOut.bind(this));

    container.appendChild(img);
  });
};

IconPicker.prototype.imageClicked = function(event) {
  const ctrl = event.target; // 获取被点击的img元素
  console.log('被点击的图标DOM元素：', ctrl);
  console.log('当前IconPicker实例：', this); // 这里的this指向IconPicker实例
};

这个方案更简洁，bind会帮我们把处理方法的this固定为当前IconPicker实例，事件对象里的target就是触发事件的DOM元素，完美解决你提到的双this困境。

方案3：（不推荐）给实例添加全局标识（仅当必须用内联事件时） #

如果因为某些限制必须用内联onClick属性，可以给每个实例生成唯一标识并挂载到全局，再通过这个标识调用方法：

function IconPicker(...) {
  // 生成唯一ID，避免全局冲突
  this.instanceId = `iconPicker_${Date.now()}_${Math.random().toString(36).slice(2)}`;
  // 把实例挂载到全局对象
  window[this.instanceId] = this;
  // ...其他构造函数逻辑
}

IconPicker.prototype.buildIt = function(divName) {
  let html = '';
  const icons = ['icon1.png', 'icon2.png', 'icon3.png'];
  
  icons.forEach(iconSrc => {
    // 通过全局唯一ID调用实例方法
    html += `<img src="${iconSrc}" 
            onClick="window['${this.instanceId}'].imageClicked(this)" 
            onMouseOver="window['${this.instanceId}'].imageHovered(this)"
            onMouseOut="window['${this.instanceId}'].imageOut(this)" />`;
  });

  document.getElementById(divName).innerHTML = html;
};

⚠️ 注意：这个方案会污染全局变量，若实例销毁时未清理全局引用，可能引发内存泄漏，所以仅作为最后备选方案。

总结一下，优先选择方案1或方案2，它们更符合现代JavaScript编码规范，灵活性和可靠性也更高。

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