Question

I have the following (simplified) code:

var Foo = (function () {
    var data = {},
        settings = {
            // default settings here
        };

    function bar(callback) { // bar is an asynchronous function
        var result = null;
        // fiddle around until you get a result
        if (callback) {
            callback(result);
        }
    }

    return {
        init: function (options, callback) {
            var kallback = callback;
            $.extend(settings, options);
            bar(function () {
                if (kallback) {
                    kallback(WHAT_GOES_HERE);
                }
            });
        },
        debug: function () {
            return {
                settings: settings,
                data: data
            };
        },
        set: function (k, v) {
            settings[k] = v;
        },
        get: function (k) {
            return settings[k];
        }
    };
}());

The code above is in a js file, then in the footer of the page in question:

<script type="text/javascript">
    Foo.init({ option1: "value", option2: "value" }, function (obj) {
        console.log("The object was ", obj);
    });
</script>

Basically, here is what I want to be able to do:

1. Create an object (with a set of optional params, but not important for this question)
2. During the creation phase of the object, have it call an asynchronous function
3. When the asynchronous function is done, I should be able to trigger a callback, and the argument for the callback should be the intialized object

I thought that this would work for WHAT_GOES_HERE above, but turns out, at least when I’ve tested it, that this is the DOM Window object.

First of all, am I constructing this object correctly? Or is there a better way to create it?

Secondly, assuming I am doing this right, what should go in the WHAT_GOES_HERE so that when console.log("The object was ", foo); runs, the value for obj is the created Foo object?

Answer 1

Yes, in an anonymous function called this way, this will refer to the window object. To refer to the this reference from the init method you have to store the reference in another variable:

var kallback = callback, self = this;
$.extend(settings, options);
bar(function () {
    if (kallback) {
        kallback(self);
    }
});

Your way of constructing the object works, as long as you only want to have one single foo object.