javascript类和鼠标点击问题

所以我试图对我的javascript代码进行分类

我有一个名为node的类，它只包含一个整数、一个显示该整数的label元素和一个递增整数的button元素

当我通过代码调用

incrementInteger

函数时，一切都正常工作。但是，当我尝试使用鼠标单击事件侦听器调用

incrementInteger

函数时，一切都不起作用

这是我的密码：

$(document).ready(function() {
    var firstNode = new Node();
    firstNode.incrementInteger();
    var secondNode = new Node();
});

function Node() {
    this.integer = 0;
    this.incrementInteger = function() {
        this.integer++;
        this.label.innerHTML = this.integer;
    }
    this.addButton = document.createElement("button");
    this.addButton.addEventListener("mousedown", this.incrementInteger);
    this.container = document.createElement("div");
    this.label = document.createElement("div");
    this.label.innerHTML = this.integer;

    var bodyElement = document.getElementsByTagName("body")[0];
    this.container.appendChild(this.label);
    this.container.appendChild(this.addButton);
    bodyElement.appendChild(this.container);
}

---

此

函数中的

incrementInteger

不引用对象上的属性。创建上下文引用：

var self = this;
this.integer = 0;
this.incrementInteger = function() {
    self.integer++;
    self.label.innerHTML = self.integer;
}

---

演示：

您应该将

此

绑定到

递增整数

上，如下所示：

this.incrementInteger = function() {
    this.integer++;
    this.label.innerHTML = this.integer;
}.bind(this);

---

如果您的

incrementInteger（）

对于使用“节点”构造函数创建的每个“节点”对象都是相同的，那么它可能是一个

原型！否则（在普通javascript中）就不会有共享的方法（和属性）

使用
addEventListener
您几乎正确地传递了对象的局部函数，而不是对象本身（从而丢失了对
此
的正确引用，如其他答案所述）

其思想是，
addEventListener
可以将一个对象作为第二个参数，该参数将查找调用的方法并调用它

无需绑定此

；它将正确地传递上下文：上下文是您刚刚设置为事件侦听器回调的对象

这为我们提供了将（否则重复克隆的）

incrementInteger

函数移动到构造函数的

prototype

，包括

handleEvent

函数的方法。很好

函数节点（）{
这个整数=0；
this.addButton=document.createElement（“按钮”）；
this.addButton.addEventListener（'mousedown'，this）；
this.container=document.createElement（'div'）；
this.label=document.createElement（'div'）；
this.label.innerHTML=this.integer；
this.container.appendChild（this.label）；
this.container.appendChild（this.addButton）；
document.getElementsByTagName（'body'）[0].appendChild（this.container）；
}
Node.prototype={
incrementInteger:函数（）{
这个.integer++；
this.label.innerHTML=this.integer；
},
handleEvent:function（）{//跟踪事件源元素以重载功能。
这个.incrementInteger（）；
}
};
//避免此代码段的html jquery脚本加载行
window.onload=function（）{/$（document）.ready（function（））{
var firstNode=新节点（）；
firstNode.incrementInteger（）；
var secondNode=新节点（）；
};                                 // });如果您使用的是jQuery，为什么所有与DOM相关的东西都要使用vanilla JS？下面两个答案中的任何一个都可以使用（它们不同，其中一个可能比另一个更适合您），但请看原因。简短的版本是“this”是基于调用上下文设置的。谢谢peterjb，在我看到解决方案后，我很好奇为什么它有效，而我的却没有，你的评论帮助解决了我的困惑。非常感谢你的快速响应和JSFIDLE。这解决了我的问题。非常感谢。我给了季梅杰夫答案，因为他先回答了，但你的答案也很有帮助。我还没有足够的代表投票支持，但当我投票支持时，我会确保投票支持。