JavaScript类问题：方法作为参数传递后属性未定义

首先，核心问题出在事件触发时this的指向丢失了。当你点击.remove_track按钮时，removeTrack方法里的this默认指向的是触发点击事件的按钮元素，而不是你的MyList类实例，所以this.DOM自然就是undefined，进而this.DOM.TrackItems也会是undefined。

另外先提个小语法错误：你写的class MyList constructor() { 不符合ES6类的语法规范，应该写成 class MyList { constructor() { ... } }，不然浏览器会直接报错哦。

下面给你几种实用的解决办法，选适合你的场景就行：

方法1：在构造函数里提前绑定removeTrack的this #

在构造函数中，把removeTrack方法的this强制绑定到类实例，这样不管事件怎么触发，this都能稳定指向实例：

class MyList {
  constructor() { 
    this.DOM = { 
      ParentNode: '#mylist', 
      AddTrackButton: '#add_track', 
      RemoveTrackButtons: '.remove_track', 
      TrackItems: '.list-group-item' 
    }; 
    // 提前绑定this到当前实例
    this.removeTrack = this.removeTrack.bind(this);
    this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', this.removeTrack); 
  }; 

  removeTrack() {
    // 现在这里的this指向MyList实例，this.DOM.TrackItems可以正常访问
    console.log(this.DOM.TrackItems);
  }

  // 假设你的bind方法是基于jQuery实现的
  bind(parent, selector, event, handler) {
    $(parent).on(event, selector, handler);
  }
}

方法2：用箭头函数包裹事件处理函数 #

箭头函数会自动继承外层作用域的this（也就是构造函数里的类实例），这样能轻松保留正确的指向：

class MyList {
  constructor() { 
    this.DOM = { 
      ParentNode: '#mylist', 
      AddTrackButton: '#add_track', 
      RemoveTrackButtons: '.remove_track', 
      TrackItems: '.list-group-item' 
    }; 
    // 用箭头函数包裹handler，保留实例的this
    this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', (e) => this.removeTrack(e)); 
  }; 

  removeTrack(e) {
    // 这里的this依然指向MyList实例
    console.log(this.DOM.TrackItems);
    // 如果需要操作触发事件的按钮，可以用e.target获取
    console.log(e.target);
  }

  bind(parent, selector, event, handler) {
    $(parent).on(event, selector, handler);
  }
}

方法3：使用jQuery的$.proxy绑定this #

如果你习惯用jQuery的工具方法，可以用$.proxy直接指定事件处理函数的this：

class MyList {
  constructor() { 
    this.DOM = { 
      ParentNode: '#mylist', 
      AddTrackButton: '#add_track', 
      RemoveTrackButtons: '.remove_track', 
      TrackItems: '.list-group-item' 
    }; 
    // 用$.proxy绑定this到实例
    const boundHandler = $.proxy(this.removeTrack, this);
    this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', boundHandler); 
  }; 

  removeTrack() {
    console.log(this.DOM.TrackItems);
  }

  bind(parent, selector, event, handler) {
    $(parent).on(event, selector, handler);
  }
}

最后补充一句：如果你的bind方法是自己实现的非jQuery版本，一定要确保在传递处理函数时，正确保留了类实例的this指向，不然还是会出现同样的问题哦。

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