Javascript事件侦听器don'；不能在对象方法内部工作

考虑以下代码：

function Elements() {
    this.mainSection = document.querySelector('.main-section');
    this.searchBtn = document.getElementById('search');
    this.searchBar = document.querySelector('.search-bar');
    ...
  }

  var initiate = new Elements();

  initiate.toggleBar = function() {
    console.log(this.mainSection);
  }

  initiate.addClick = function() {
    this.searchBtn.addEventListener('click', this.toggleBar );
  }

  initiate.addClick();

单击事件时，它返回未定义的

，并用括号自动运行函数

你为什么这样做

另外，我只是在学习Javascript，并尝试编写灵活的代码。这是我正在做的一个很好的实践，还是我把事情复杂化了？

你可以改变

this.searchBtn.addEventListener('click', this.toggleBar );

到

要使此代码正常工作：）

---

问题在于，当您将函数

this.toggleBar

分配给

addEventListener

时，函数

this.toggleBar

的

上下文丢失。有关详细信息，请参阅。
谢谢。这个解决方案适用于我的情况。我刚才在读关于“.bind（）”的解释
this.searchBtn.addEventListener('click', this.toggleBar.bind(this));