JavaScript类中如何让事件回调的$(this)指向DOM元素而非类实例

问题的核心原因是你在事件回调中使用了箭头函数，箭头函数没有独立的this绑定，会继承外层paginate_event方法的this指向（也就是Navigation类的实例），因此无法指向触发点击事件的DOM元素。

以下是两种可直接落地的解决方案：

方案1：通过事件对象获取触发元素（改动最小） #

事件对象的currentTarget属性固定指向当前绑定事件的触发元素，直接替换原代码中的this即可，不需要调整回调函数的写法，类实例的this也可以正常使用：

paginate_event(selector_id = '.pagination a') {
  $(document).on('click', selector_id, (event) => {
    overlay(this.content);
    event.preventDefault();
    var params = window.location.search;
    // 替换this为event.currentTarget获取触发点击的a标签
    var page = $(event.currentTarget).attr('href').split('page=')[1];
    this.fetch_data(params,page);
  });
}

方案2：改用普通函数，提前缓存类实例指向 #

如果需要保留$(this)获取DOM元素的写法，可以将回调改为普通函数，同时提前在方法内层缓存类实例的this指向：

paginate_event(selector_id = '.pagination a') {
  // 提前缓存类实例的this指向
  const self = this;
  // 回调改用普通函数，普通函数的this会指向触发事件的DOM元素
  $(document).on('click', selector_id, function(event) {
    overlay(self.content);
    event.preventDefault();
    var params = window.location.search;
    var page = $(this).attr('href').split('page=')[1];
    self.fetch_data(params,page);
  });
}

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