javascript - 为什么 "this"指向 Javascript 递归函数中的其他内容？

Question

考虑以下具有递归 boom 函数的 JavaScript 代码

function foo() {
    this.arr = [1, 2, 3, 4, 5];
    this.output = "";

    this.get_something = function(n, callback) {
        this.output += "(" + n + ")";
        $.get("...", function(result) {
                       // do something with 'result'
                       callback();
                     });
    };

    this.boom = function() {
        if (this.arr.length > 0) {
            this.get_something(this.arr.shift(), this.boom);
        }
    };

    this.boom();
    document.write("output = [" + this.output + "]");
}

var f = new foo();

当get_something第一次执行并调用callback()时，this.arr不再可用(可能是因为this 现在指向其他东西)。

你会如何解决这个问题？

Answer 1

问题出在 Ajax 请求和函数调用上下文中

您遇到的问题是当您从服务器接收到数据后调用 boom 时的函数调用上下文。将您的代码更改为此，事情应该开始工作:

this.get_something = function(n, callback) {
    var context = this;
    this.output += "(" + n + ")";
    $.get("...", function(result) {
        // do something with 'result'
        callback.call(context);
    });
};

补充建议

我知道你的数组只有很少的项目，但你的这段代码可能只是一个例子，实际上有很多项目。问题是您的递归将与您的数组元素一样深。这可能会成为一个问题，因为浏览器(或者更好的说法是其中的 Javascript 引擎)对递归深度进行了安全检查，当你达到限制时你会得到一个异常。

但是您还必须更改文档写入并将其放入 boom 函数中，因为这些调用现在不再是递归的(它们一开始就是递归的)。

this.boom = function() {
    if (this.arr.length > 0) {
        this.get_something(this.arr.shift(), this.boom);
    }
    else {
        document.write("output = [" + this.output + "]");
    }
};

经过更深入的观察

您的代码实际上不会以递归方式执行，除非您使用同步 Ajax 请求，它本身就是一个show stopper，并且每个人都会敦促您尽可能保持异步。所以基本上我的第一个提供函数调用上下文的解决方案就可以很好地解决这个问题。

如果您使用异步 Ajax 请求，您的 document.write 不应显示正确的结果，因为它会被调用得太早。我最后建议的 boom 函数体也可以解决这个问题。