Question

Im looking through some code (unfortunatly the author isnt around anymore) and im wondering why he has used the .call method.

hmlPlaylist.prototype.loadVideos = function () {
    var scope = this;

    this.config.scriptUrl = '_HMLPlaylistAjax.aspx?' + Math.random();

    jQuery.ajax({
        type: 'GET',
        url: this.config.scriptUrl,
        success: function (d, t, x) {
            scope.loadVideos_callback.call(scope, d);
        },
        error: function () {
        }
    });
};

hmlPlaylist.prototype.loadVideos_callback = function (data) {
    var jsonData = '';
    var jsonError = false;

    try {
        jsonData = eval("(" + data + ")");
    } catch (jError) {
        jsonError = true;
    }

    if (!jsonError) {

        if (jsonData.playlists.length > 0) {
            this.buildPlaylistList(jsonData.playlists);
        }
        if (jsonData.videos.length > 0) {
            this.buildVideoList(jsonData.videos);
            this.bindVideoNavs();
        }
    }
    else {

        // no json returned, don't do anything
    }
};

Obviously he seems to have used it to pass a ‘this’ reference to the loadVideos_callback method but why? The ‘loadVideos_callback’ method is attached to the prototype of ‘hmlplaylist’ which is the ‘class’. So if you access this inside the ‘loadVideos_callback’ method you get to the same thing dont you?

Answer 1

yes, I think you are right (I can’t see the code in action). You still need the closure around scope, but in this case the use of call is not necessary.

To pull some of the comments into this answer, this is always the context on which the method was invoked. So if a new instance of htmlPlayList was created, and the method invoked on that instance, this would be a reference to that instance.