Javascript中的类-作为参数传递的方法后未定义的属性

Question

谁能解释为什么我在类实例化时收到第一条控制台消息：“1 .list-group-item”，但是在按下“.remove_track”按钮后，我得到 this.DOM.TrackItems 未定义？非常感谢任何帮助或建议。

class MyList
        constructor() {
            this.DOM = {
                ParentNode: '#mylist',
                AddTrackButton: '#add_track',
                RemoveTrackButtons: '.remove_track',
                TrackItems: '.list-group-item'
           };

            this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', this.removeTrack);

        };

        //jQuery on/off methods
        bind(parentSelector, childSelector, eventName, functionName) {
            console.log('1 ' + this.DOM.TrackItems);
            $(parentSelector).on(eventName, childSelector, functionName);
        };

        unbind(parentSelector, childSelector, eventName, functionName){
            $(parentSelector).off(eventName, childSelector, functionName);
        }

        removeTrack(evt) {
            evt.preventDefault();
            console.log('2 ' + this.DOM.TrackItems);
        }
}

//编辑：

Here's a jsfiddle

Answer 1

问题与上下文this 的范围有关，该方法是使用来自事件click 的处理程序的上下文，特别是单击的按钮而不是类MyList 的上下文。

另一种方法是使用函数bind 绑定上下文：

                   +----- This is the object MyList
                   |
                   v
functionName.bind(this); <---- This call returns a new function bound with 
              ^                the specific context.
              |
              +---- This function binds the context

如果你需要访问被点击的元素，你可以使用参数event。

class MyList {
  constructor() {
    this.DOM = {
      ParentNode: '#mylist',
      AddTrackButton: '#add_track',
      RemoveTrackButtons: '.remove_track',
      TrackItems: '.list-group-item',
      Output: '#output'
    }

    this.bind(this.DOM.ParentNode, this.DOM.RemoveTrackButtons, 'click', this.removeTrack);
  };

  bind(parentSelector, childSelector, eventName, functionName) {
    $(this.DOM.Output).html('Called Bind'); //works
    // This is the line with a fix.
    $(parentSelector).on(eventName, childSelector, functionName.bind(this));
  };

  unbind(parentSelector, childSelector, eventName, functionName) {
    $(this.DOM.Output).html('Called Unbind');
    $(parentSelector).off(eventName, childSelector, functionName);
  }

  removeTrack(evt) {
    evt.preventDefault();
    console.log(evt.target);
    console.log(this); // This is just to show the content of this.
    $(this.DOM.Output).html('Called removeTrack');
  }
}

x = new MyList();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mylist">
  <button class="remove_track">
  HELLO
  </button>
  <div id="output">
  </div>
</div>