closure control flow
<p>I got this code block:</p>

<pre><code>(function($, exports) {
    var mod = function(includes) {
        if (includes) this.include(includes);
    };
    mod.fn = mod.prototype;
    mod.fn.proxy = function(func) {
        return $.proxy(func, this);
    };
    mod.fn.load = function(func) {
        $(this.proxy(func));
    };
    mod.fn.include = function(ob) {
        $.extend(this, ob);
    };
    exports.Controller = mod;

})(jQuery, window);

(function($, Controller) {
    mod = new Controller;
    mod.toggleClass = function(e) {
        this.view.toggleClass("over", e.data);
    };
    mod.load(function() {
        this.test = 'test';
        console.log(this.test); // Delayed
        this.view = $("#view");
    });

    console.log(mod.view) // returns undefined
    console.log(mod);

})(jQuery, Controller);
</code></pre>

<p>when executing on firefox, the result on firebug console panel is as follows:</p>

<pre><code>undefined
Object { toggleClass=function(), proxy=function(), load=function(), more...}
test
</code></pre>

<p>That means the last two log functions (they're placed at the bottom of the code block) was executed before the first one (which is : console.log(this.test); // Delayed)</p>

<p>Could you explain why the flow happened in this way?</p>
