Как получить доступ к объекту глобального уровня из обратного вызова внутри того же атрибута объекта глобального уровня?

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
  }
}

Я хочу вызвать функцию removeSelectedClass() в обратном вызове прослушивателя событий eventListener, и я точно знаю, что this.removeSelectedClass() неверен, так как это this относится к объекту контекста this.activeDates[i] вместо calendar. Простое решение включает создание анонимной функции для обратного вызова слушателя событий, но это невозможно в этом случае, потому что я хочу повторно использовать eventListener в dateChecked. Что мне делать?

Answer 1

Методы в calendar закрывают переменную calendar, поэтому вы можете просто использовать calendar.removeSelectedClass():

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

В более общем случае, если они Прослушиватели событий DOM, вы можете использовать обычные this решения , чтобы this в eventListener было calendar, принять параметр event для eventListener и использовать event.currentTarget для ссылки на элемент при добавлении списка классов (event.currentTarget.classList.add(...)). По умолчанию event.currentTarget совпадает с this (это элемент, к которому вы подключили событие). Но вам не нужно делать это здесь, поскольку calendar является одиночным и eventListener имеет к нему доступ.