使用原型(prototype)方法未定义 Javascript 数组成员变量

Question

在下面的代码中，pushElement 方法在处理“words”变量时工作得很好，但是当我运行 popElement 方法时，它在“this.words.length”部分失败并出现以下错误: “未捕获的类型错误:无法读取未定义的属性‘长度’”。

有什么想法吗？

function AnimationStack() {
    this.words = [];
}

AnimationStack.prototype.pushElement = function(element) {
    this.words.push(element);
}

AnimationStack.prototype.popElement = function() {
    if (this.words.length>0) {
        var element = this.words.shift();
        return element;
    } else {
        return null;
    }
}

var AS = new AnimationStack();

var element = $("<div></div>");
AS.pushElement(element); // works perfect
AS.pushElement(element); // works perfect
AS.pushElement(element); // works perfect

var pop = AS.popElement(); // always fails

编辑:上面的代码是完美的。这是我实际实现我如何使用上面的代码。我正在使用 setInterval 调用 popElement() 来更改“this”的范围。在此处阅读完整答案:

http://forrst.com/posts/Javascript_Array_Member_Variable_is_Undefined_wi-g6V

Answer 1

@Chad 已经找到了答案，但这里是解释。

如果你这样调用函数:

AS.popElement();

popElement 函数在 AS 对象的上下文中运行(意思是“this”指的是 AS)。但是，如果您像这样使用 setInterval(或任何回调式函数):

setInterval(AS.popElement, 1000);

您只是传递了对 popElement 函数的引用。所以当1000毫秒后执行popElement时，它是在全局上下文中执行的(意思是“this”指的是window)。如果您调用:

window.popElement();

避免这种情况的一种可能的替代方法是执行以下操作:

setInterval(function() { return AS.popElement() }, 1000);

另一种选择是使用 apply 或 call 方法显式设置上下文:

setInterval(AS.popElement.apply(AS), 1000);