1

in App:

var bootstrap = new Bootstrap();
bootstrap.init( this, this.onBootstrapComplete );

in Bootstrap:

this.init = function( app, completeHandler ){
    _app = app;
    _completeHandler = completeHandler;
        ...
}

...

var _allReady = function(){
        _completeHandler( _app );
}

back in App:

this.onBootstrapComplete = function( app )
{
        app.something();
        app.someValue = ...
}

I wanted to get this context inside onBootstrapComplete. It works but it doesn't look right :)

If let's say I wanted to call onBootstrapComplete directly from App, I would have to call it this.onBootstrapComplete( this ).

How can I do it so my onBootstrapComplete looks like this:

this.onBootstrapComplete = function()
{
        this.something();
        this.someValue = ...
}
user2015338
  • 262
  • 2
  • 4
  • 13
  • 1
    I'm not quite sure what you want, but maybe [reading some documentation about `this`](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/this) will help you. – Felix Kling Jan 27 '13 at 11:25

2 Answers2

5

I would recommend using underscore.js. See http://underscorejs.org/#bind for further information.

this.onBootstrapComplete = _.bind( function() {
   ...
   this.someFunction(); // this context is available now
   ... 
}, this );
tmuecksch
  • 6,222
  • 6
  • 40
  • 61
1

this is evaluated when the function is called. Say you use this inside a function f.

There are basically two ways to call f:

(expr).f() if f is called as a property on some object, this will evaluate to that object expr.
f() In this case, this will evaluate to window.

Since you pass the function to bootstrap, it can only call the function as f().

You could use a closure:

var self = this;
this.onBootstrapComplete = function()
{
        self.something();
        self.someValue = ...
}

Alternatively, you can use a function to f.apply() the function appropriately:

function bind(context, f){
    return function() {
        return f.apply(context, arguments);
    }
}

this.onBootstrapComplete = bind(this, function()
{
        this.something();
        this.someValue = ...
});

Or with ECMAScript 5, there is already a bind function[MDN]:

this.onBootstrapComplete = function()
{
        this.something();
        this.someValue = ...
}.bind(this);
phant0m
  • 16,595
  • 5
  • 50
  • 82
  • 1
    Please correct me if I am wrong with anything. I am trying to pick the best option. [3rd option] IE8 has 24% penetration, so may be to early for this. [1st option] Looks clean and less memory hungry then [2nd option]. BTW [1st option] isn't really a closure is it? :) By 'memory hungry' I actuly mean a risk of a js noobie(me) falling into lots of memory leaks – user2015338 Jan 27 '13 at 12:25
  • @user2015338 Yes, it is a closure: It closes over the `self` variable. AFAIK there are no memory leaks in these functions, unless `this` is a DOM object and you're using a browser that only employs reference counting, but I'm not really sure. You'd best ask a new question about just that issue to get a more authorative answer. – phant0m Jan 27 '13 at 12:55
  • @user2015338: Basically every function is a closure in JavaScript. You cannot create functions that don't have access to a higher lexical scope. – Felix Kling Jan 27 '13 at 13:12
  • Thank you phant0m, I was watching this video about closures at the same time http://www.youtube.com/watch?v=KRm-h6vcpxs @10min53sec he says: A closure is created when a function is returned from another function, retaining its original scope. This is the reason why I asked :) – user2015338 Jan 27 '13 at 14:49