事件处理函数作为一种方法

时间:2016-10-04 15:08:46

标签: javascript oop this

我是OOP的新手并且正在尝试我的第一个项目。这是我的问题:

var calculator = {
  operationBar: document.getElementById('operation-bar'),
  print: function(){
    this.operationBar.innerHTML += 1;
  }
}

var one = document.getElementById('number1');
one.addEventListener('click',calculator.print)

当我点击带有id(number1)的HTML元素时,我收到以下错误:

无法读取undefined的属性'innerHTML'。

它没有将 this 关键字与我的计算器对象相关联。

但是,如果我这样做:

var calculator = {
  operationBar: document.getElementById('operation-bar'),
  print: function(num){
    this.operationBar.innerHTML += 1;
  }
}

calculator.print()

它有效并且关键字似乎正常工作。

我知道问题的原因是关键字是因为如果我在第一个代码段中执行该功能并将this替换为calculator,那么它将起作用,作为我的事件处理函数。

为什么这样做?

0 个答案:

没有答案