1

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!?

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

outstanding! thank you very much for your enlightenment and the work you put into your answer.
1

Live example

function F(i, f) {
    this.i = i;
    this.state = {
        'fn': f,
        i: 42
    };
    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(); // 42!
f1.state.fn(); // 42!

When you call state.fn() it prints this.i which is state.i which is 42 in my case but undefined in your case.

You can alternatively force this to not be state but to be the object you expect it to be by doing

this.state = {
    'fn': f.bind(this)
};

.bind is ES5 however so you should get the ES5-shim

Improve this answer

3 Comments

absolutely - nice test! but it still comes back to the fact that this is not associated with F but rather F.state - this (as it were) is what took me by suprise!
missed bind on first read - very cool. seems to work fine on chrome and ff.
@cc_young bind fails on older browsers. Mainly FF3.6 and IE8. MDN has a shim

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.