Question

我在Javascript中遇到了setInterval（）方法的问题。我的主要课程：

var sq1 = new Square(20, 20);
window.onkeydown = function (e)
{
    var key = e.keyCode ? e.keyCode : e.which;
    if (key == 38)
    {
        sq1.moveUp();
    }
}

我有以下构造函数。

function Square(x,y)
{
    var multiplicator = 10;

    this.xPos = x;
    this.yPos = y;

    this.domObj = document.createElement("div");
    this.domObj.style.position = "absolute";
    this.domObj.style.left = this.xPos * multiplicator + 'px';
    this.domObj.style.top = this.yPos * multiplicator + 'px';
    this.domObj.style.width = multiplicator + 'px';
    this.domObj.style.height = multiplicator + 'px';
    this.domObj.style.backgroundColor = "black";
    document.getElementById("idCanvas").appendChild(this.domObj);

    this.moveUp = function ()
    {
        this.yPos--;
        this.domObj.style.top = (this.yPos * multiplicator) + 'px';
    }
}

现在工作正常，只需将每个keyUp事件移动10px。但是我想在keyUp事件之后每1000毫秒自动调用this.moveUp（）。但是当我尝试这个时：

this.moveUp = function ()
{
    setInterval(function ()
    {
        this.yPos--;
        this.domObj.style.top = (this.yPos * multiplicator) + 'px';
    }, 1000);
}

我收到的错误是“这个＆＃39;是空的。

如何修复它（最好没有jQuery）？

Answer 1

您需要将setInterval绑定到与您的类相同的目标。

this.moveUp = function ()
{
    setInterval(function ()
    {
        this.yPos--;
        this.domObj.style.top = (this.yPos * multiplicator) + 'px';
    }.bind(this), 1000);
}

Answer 2

目标是setInterval

中的Window对象

您需要捕获词法范围并使用它或使用bind将对象引用硬绑定到setInterval范围内的处理程序。

词汇范围的用法

this.moveUp = function() {
  // capturing the lexical scope
  var self = this;
  setInterval(function() {
    self.yPos--;
    self.domObj.style.top = (self.yPos * multiplicator) + 'px';
  }, 1000);
}

使用bind

this.moveUp = function() {
  setInterval(function() {
    this.yPos--;
    this.domObj.style.top = (this.yPos * multiplicator) + 'px';
  }.bind(this) , 1000);
}

Javascript setInterval不适用于此。对象

2 个答案: