Javascript此关键字在原型函数中递归执行一次，然后未定义

Question

I have created a prototype and I have this function in it:

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();
    });

},

Which is being called by the function 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();
},

The point of this is, I have an array named queue , it can store any functions in it. So I want to add many functions into the queue array and then when I call commit() I want it to execute all of these functions. However, I don't want it to execute all of them at once, but I want them to execute in a queue (wait till each one is done, then execute the next one).

I have used recursion to create this, but I am falling in the following problem:

when workRequests function gets called for the first time, everything works fine, but after inside the function it calls workRequests() , I will get the following error:

Uncaught TypeError: Cannot read property 'queue' of undefined

I am no expert with javascript so I don't really understand what happens behind the scenes that makes the this keyword lose it's value that used to be the same in the first call of workRequests() .

I call the whole thing like this:

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();

An help solving the error would be very appreciated, thanks!

Answer 1

You have to explicitly arrange for this to be set:

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

Slightly simpler maybe:

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

The .bind() method returns a function that calls your function such that this will be set to the given value.