如何从同一全局级对象属性内的回调访问全局级对象？

Question

var calendar = {
  activeDates: null,

  dateClicked: function () {
    this.activeDates = document.querySelectorAll(
      '[data-calendar-status="active"]'
    )
    for (var i = 0; i < this.activeDates.length; i++) {
      this.activeDates[i].addEventListener('click', this.eventListener)
    }
  },

  eventListener: function () {
    this.removeSelectedClass()
    this.classList.add('vcal-date--selected')
  },

  removeSelectedClass: function () {
    // details omitted
  },

  dateChecked: function () {
    //will call removeEventListener here
  }
}

我想在事件侦听器回调 eventListener 中调用函数 removeSelectedClass()，我确定 this.removeSelectedClass() 是错误的，因为此 this 指的是上下文对象 this.activeDates[i] 而不是 calendar。一个简单的解决方案涉及为事件侦听器回调创建一个匿名函数，但在这种情况下这是不可能的，因为我想在 dateChecked 中重用 eventListener。我应该怎么办？

Answer 1

calendar 中的方法关闭了 calendar 变量，所以你可以只使用 calendar.removeSelectedClass():

    eventListener: function () {
      calendar.removeSelectedClass()
//    ^^^^^^^^
      this.classList.add('vcal-date--selected')
    },

在更一般的情况下，如果这些是 DOM 事件侦听器，您可以在添加 class 列表时使用 usual this solutions so that this within eventListener is calendar, accept the event parameter to eventListener, and use event.currentTarget 来引用元素（event.currentTarget.classList.add(...)).默认情况下，event.currentTarget 与 this 相同（它是您挂接事件的元素）。但是你不需要在这里这样做，因为 calendar 是一个单例并且 eventListener 可以访问它。

如何从同一全局级对象属性内的回调访问全局级对象？

How to access the global-level object from a callback inside the same global-level object's attribute?

javascript

events

callback

this