当我在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

使用Function的bind方法 就像这样：

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

这些是vue的源代码，您明白吗？

Answer 2

我认为在Vue中他们尝试采用类似于回调自动绑定到传统tabBarOptions: { //... Other props style: { position: 'absolute', bottom: 0, right: 0, left: 0, height: 54, } } 元素的方法：

  

如果使用addEventListener（）将处理函数附加到元素，则处理程序中addEventListener的值是对元素的引用。它与传递给处理程序的事件参数的currentTarget属性的值相同。

MDN

上名为“处理程序中此值的部分”一节的摘录

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

除了Vue之外，它们会稍微弯曲规则，它不会自动绑定到元素（示例中为this），而是自动绑定组件。