Question

"o oo"

正如您所看到的那样，问题不在于代码的组织而在于事件处理程序，因为即使在事件处理程序之后创建了播放器类的更新方法，它也能正常工作。问题到底是什么，我该如何解决？

Answer 1

在事件处理程序中，this始终是事件处理程序绑定的元素，而不是传入函数的构造函数。

要将代码编写得更短，您可以

var Player = function() {

    this.rect = "something";

    this.control = function(){
        if (event.which == 39 || event.keyCode == 39){
            alert(this.rect); // NOPE ... this is the element
        }
    };
}

var archie = new Player(); // create instance

window.addEventListener('keydown', archie.control); // some function in the instance

如果您只需要将对象作为this值，请使用bind

window.addEventListener('keydown', archie.control.bind(archie));

另请注意，您的事件处理程序回调缺少event参数，并且依赖于全局event，这在所有浏览器（Firefox）中都不受支持，所以您应该这样做

this.control = function(event) {...

Answer 2

我经常使用的另一个解决方案是将this值存储在另一个变量ex中。 self并在每个地方使用该副本，因此可能是：

var Player = function() {

    var self = this;

    self.rect = "something";

    self.control = function(event){
        if (event.which == 39 || event.keyCode == 39){
            alert(self.rect);
        }
    };
}

这使您可以保证使用您想要的内容，因为this基于方法执行的上下文。

调用事件后，javascript构造函数属性变为undefined

2 个答案: