Using call to pass context

Question

I'm trying to use call to pass the context of the Utilities object so I can access its members (allData array, etc) within the myTest function.

I'm getting error:

ReferenceError: allData is not defined

This tells me the context is lost and I guess I'm not binding the context correctly. How do I do this?

var Utilities = {
    allData : [],
    storage : [],

    apiRequest : function () {
        this.allData = ["a","b","c"];
        var myTest = this.allData.map.call(this, function (i, el) {
            var url = 'testPHP.php/translate_tts?ie=utf-8&tl=zh-CN&q=' + i;
            return $.get(url, function (returned_data) {
                this.storage.push(returned_data);
            });
        });

        $.when.apply($, myTest).done(function () {
            log('done!');
            log(this.storage[i]);
        });

Answer 1

Reminder

There is only function level context in Javascript, and this is nothing more than a local variable. By default, this is set to the global window object:

function me () { return this; };
me() === window; // true

Or to the object from which the function was invoked:

var o = {};
o.me = me;
o.me() === o; // true

Knowing this, read the following carefully:

var me = o.me;
me === o.me; // true, not a copy
me() === o; // false
me() === window; // true

var p = {};
p.me = o.me;
p.me() === p; // true
o.me() === o; // true

As you can see, this is automatically set at function invocation. This is the default behaviour, but you can also do it yourself using either .call() or .apply() (one shot):

me.call(o) === o; // true
me.apply(o) === o; // true
p.me.call(o) === o; // true
me() === window; // true

And more recently, .bind() (permanent):

me = me.bind(o);
me() === o; // true
me() === window; // false

---

Your question

I would use .bind():

var Utilities = {
    allData : [],
    storage : [],

    apiRequest : function () {
        this.allData = ["a","b","c"];
        var myTest = this.allData.map(function (i, el) {
            var url = 'testPHP.php/translate_tts?ie=utf-8&tl=zh-CN&q=' + i;
            return $.get(url, function (returned_data) {
                this.storage.push(returned_data);
            }.bind(this));
        }.bind(this));

        $.when.apply($, myTest).done(function () {
            log('done!');
            // I've added a loop here
            var i, l = arguments.length;
            for (i = 0; i < l; i++) {
                log(this.storage[i]);
            }
        }.bind(this));

Answer 2

Great answer above. One thing to emphasize at this point: whenever you bind the object at initialization it will be bound and cannot be call/apply'd using another context anymore. IMO it's up to you whether to use call/apply (at runtime) OR .bind (permanently).

Going from here:

I'm trying to use call to pass the context of the Utilities object so I can access its members (allData array, etc) within the myTest function.

var OtherTest = function() {
    this.dataStorage.push(["ok"]);
    console.log(arguments);
}

var Utilities = {
    dataStorage: [],
    allData: [],
    apiRequest: function() {
        this.allData = ["a","b","c"];

        OtherTest.apply(this,arguments);

    }
}


Utilities.apiRequest('hu','hu');
console.log(Utilities.dataStorage[0]);

Since this is a reference to the object, it can be mutated at any time after initialization making it easy to use call/apply to pass the context which is the Utilities Object in this case.