Javascript 原型函数递归中的this关键字执行一次后未定义

Question

我已经创建了一个原型，其中有这个功能：

workRequests:
/**
 * Works out all requests in the queue with
 */
function workRequests() {

    /**
     * Checks if queue of requests is empty
     */
    if (this.queue.length == 0) {
        this.setDone(true);
        return;
    }

    /**
     * Gets the next request
     */
    var request = this.queue.shift();
    request(function() {
        workRequests();
    });

},

正在被函数 commit

调用

commit:
/**
 * Executes all requests till there are no requests left
 */
function commit() {
    console.log("committed");
    /**
     * Make sure the system is already committing all
     */
    running = true;
    this.workRequests();
},

重点是，我有一个名为queue的数组，它可以在其中存储任何函数。所以我想将许多函数添加到 queue 数组中，然后当我调用 commit() 时我希望它执行所有这些函数。但是，我不希望它一次执行所有这些，而是希望它们在队列中执行（等到每个执行完，然后执行下一个）。

我使用递归来创建它，但我遇到了以下问题：

当第一次调用 workRequests 函数时，一切正常，但是在函数内部调用 workRequests() 之后，我会得到以下错误：

Uncaught TypeError: Cannot read property 'queue' of undefined

我不是 javascript 方面的专家，所以我真的不明白幕后发生了什么导致 this 关键字失去了它在第一次调用时相同的值workRequests().

我这样称呼整个事情：

var reqs = new SyncRequests();
for(var i = 0; i < 5; i++) {
    reqs.executeRequest(function(callback) {
        $.ajax({
            type: "POST",
            async: true,
            url: 'www.google.com',
            data:  {direction: 'up' },
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                callback();
            },
            error: function (err) {
                callback();
            }
        });
    });
}
reqs.commit();

非常感谢能帮助解决错误，谢谢！

Answer 1

您必须明确安排要设置的 this：

var request = this.queue.shift();
var self = this;
request(function() {
    workRequests.call(self);
});

可能稍微简单一点：

var request = this.queue.shift();
request(workRequests.bind(this));

.bind() 方法 returns 一个调用您的函数的函数，这样 this 将被设置为给定值。

Javascript 原型函数递归中的this关键字执行一次后未定义

Javascript this keyword in recursion in prototype functions executes once and then undefined

javascript

recursion

jquery