Почему не пропускается контекст, когда я передаю обратный вызов в vue?

Question

  data: () => ({
    showCurrenciesPopup: false,
  }),
  methods: {
    closeCurrenciesPopup() {
      this.showCurrenciesPopup = false;
    },
    escapeKeyListener(event: any) {
      if (event.keyCode === 27) {
        this.closeCurrenciesPopup();
      }
    },
  },
  created() {
    document.addEventListener('keyup', this.escapeKeyListener);
  },

кажется, что контекст должен быть потерян здесь document.addEventListener('keyup', this.escapeKeyListener), но не! Никаких ошибок нет, все работает. Кто-нибудь знает, что происходит?

Answer 1

Я думаю, что в Vue они пытаются использовать аналогичный подход, чем обратный вызов, автоматически связанный с элементом в традиционном addEventListener:

Если присоединить функцию-обработчик к элементу с помощью addEventListener (), значение this внутри обработчика является ссылкой на элемент. Он совпадает со значением свойства currentTarget аргумента события, передаваемого обработчику.

Выписка из раздела «Значение этого в обработчике» в MDN

.

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_value_of_this_within_the_handler

За исключением случая с Vue, они немного сгибают правило, оно не привязывается автоматически к элементу (document в вашем примере), а к компоненту.

Answer 2

использовать методы связывания функции просто так:

created() {
    document.addEventListener('keyup', this.escapeKeyListener.bind(this));
},

это исходный код vue, понимаете?