Question

我只是通过按钮创建一个无限向下移动的小方块来玩JavaScript。但是，我遇到了一个小问题，我不明白为什么。

代码是这样的：

var parentContainer = document.querySelector('.container'),
    inc = 5;

function Square()
{
    this.pos = 0;
    var thisSquare = null;

    this.create = function()
    {
        var newSquare = document.createElement('div');
        newSquare.className = 'square';
        newSquare.style.top = this.pos + "px";

        thisSquare = parentContainer.appendChild(newSquare);
    }

    this.getSquare = function()
    {
        return thisSquare;
    }

    this.update = function()
    {
        this.pos += inc;
        this.getSquare().style.top = this.pos + "px"; // Ln 26
    }
}


var square = new Square();
square.create();
setInterval(square.update, 100);

console.log(square.getSquare()); // Ln 35

标记的行是发生混淆的地方。

第26行和第35行本质上是相同的，调用getSquare()方法，但是第26行在第35行成功的地方失败。

第35行给了我一个Node，这就是我想要的。但是，第26行给出错误：

未捕获的TypeError：undefined不是函数

在我使用var thisSquare = null;之前，我使用了this.square。应用相同的逻辑，我得到了错误：

未捕获的TypeError：无法设置属性＆＃39; top＆＃39;未定义的

有人可以向我解释为什么我会收到此错误吗？因为我迷路了。

Answer 1

嵌套函数中的

this关键字将是undefined（即setInterval函数），因此您需要考虑如下所示使this引用您的对象：

使用bind方法：

var square = new Square();
square.create();
setInterval(square.update.bind(square), 100);

引用对象内部的方法给出undefined不是函数错误

1 个答案: