javascript - 访问 javascript 对象的 this 元素的正确方法是什么？

Question

在下面的 javascript 对象中的 setClickEvents 函数上，当我尝试在 addEventListener 中使用 this 元素时，它不起作用，我必须使用对象本身 tabUI。

我不确定这是否是一个很好的做法，但它确实有效。

我可以做些什么来改进它？

var tabUI = {
    leftTab: undefined,
    rightTab: undefined,

    setTabs: function(leftTabId, rightTabId) {
        this.leftTab = document.getElementById(leftTabId);
        this.rightTab = document.getElementById(rightTabId);
    },

    setClickEvents: function() {
        this.leftTab.addEventListener('click', function() {
            // This works
            tabUI.leftTab.classList.add('tab_selected');
            tabUI.rightTab.classList.remove('tab_selected');

            // This doesn't work
            this.leftTab.classList.add('tab_selected');
            this.rightTab.classList.remove('tab_selected');
        });

        this.rightTab.addEventListener('click', function() {
            tabUI.leftTab.classList.remove('tab_selected');
            tabUI.rightTab.classList.add('tab_selected');
        });
    },
}

Answer 1

this事件处理程序内部是发生事件的元素。

您可以使用以下两种方法中的任意一种来解决您的问题。我建议您使用第二种方式，以便您可以访问发生事件的元素。

1. bind上下文

   更改函数的上下文，无论函数如何调用。

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

this.leftTab.addEventListener('click', function() {
  // This works
  tabUI.leftTab.classList.add('tab_selected');
  tabUI.rightTab.classList.remove('tab_selected');

  // This also works here
  this.leftTab.classList.add('tab_selected');
  this.rightTab.classList.remove('tab_selected');
}.bind(this));
// ^^^^^^^^^^

缓存上下文/this

缓存之前的上下文，然后可以在事件处理程序中使用。

var that = this; // Cache this here
// ^^^^^^^^^^^^^

this.leftTab.addEventListener('click', function() {
  // This works
  tabUI.leftTab.classList.add('tab_selected');
  tabUI.rightTab.classList.remove('tab_selected');

  // That works here
  that.leftTab.classList.add('tab_selected');
  // ^^^
  that.rightTab.classList.remove('tab_selected');
  // ^^^
});