Question

the object F has a function stored as this.fn and this.state.fn. can be called successfully as f.fn() but not as f.state.fn()

function F( i, f ) {
        this.i = i;     
        this.state = { 'fn':f };
        this.f = f;
};                      
F.prototype.inc = function() { this.i++ };
F.prototype.fn = function() { this.state.fn() };
f1 = new F( 1, function() { console.log( this.i ); } );
f1.f();                 // this works
f1.inc();               // this works
f1.state.fn;            // prints the function
f1.fn();                // undefined!
f1.state.fn();          // undefined!

the problem seems to be that the function is stored in the object state, because this works:

f1.state.fn.call( f1 );
F.prototype.fn = function() { this.state.fn.call(this); };

which seems to imply that the this context within F.state.fn is not F but rather F.state – which to me is completely counter-intuitive – is this right!?

Answer 1

Within a function, this depends entirely on how you called the function.

When you call a function using dot notation from an object this will be automatically set to that object.

If you say someObject.someChildObject.someFunction() then within someFunction() you’ll find this will be set to someChildObject.

So in your example f1.fn() should result in this being f1 within fn(), but then within that function you say this.state.fn() – which will call state‘s fn() with this set to state.

You can override this behaviour using call or apply.

Another example just for your interest:

function F( i, f ) {
        this.i = i;     
        this.state = { 'fn':f };
        this.f = f;
};                      
f1 = new F( 1, function() { console.log( this.i ); } );
f1.f();   // works - 'this' will be f1
var x = f1.f; // create a reference to the same function
x();      // won't work - 'this' will probably be 'window'

If you create a reference to a function originally defined as an object property and call the function via that reference then this will be whatever applies to your new reference. In my example the x reference is a global, which in practice means it belongs to the window object. What you can learn from this is that the function that f1.f() calls doesn’t really belong to f1 at all.

Continuing that example:

f2 = {};
f2.i = "hello";
f2.f = f1.f;
f2.f(); // 'this' will be f2, so should log "hello"

When you call f2.f(), you’ll find this is set to f2, and because I’ve set a property f2.i the function will log that property.