“this” context output not able to understand

Question

I am facing difficulty understanding the below code.

function foo() {
    console.log( this.a );
}

var obj = {
    a: 2,
    foo: foo
};

var a = 4;

obj.foo();
setTimeout( obj.foo, 100 );
setTimeout( obj.foo.bind(obj), 100 );

Its output comes as 2, 4, 2 which I am not able to understand.

Answer 1

The first case,

obj.foo();

Where the this inside of foo will point obj since you have assigned the function as a property of that particular object.

The second case,

setTimeout( obj.foo, 100 );

In setTimeout, the passed function will be eval uated in the window's context. So here var a = 4; was executed in window's context and became the property of window. when accessing this inside the function foo , that would point to window at this particular situation.

The third case,

setTimeout( obj.foo.bind(obj), 100 );

You just bound the obj as this to the function foo . And even though the function evaluated in window's context, the bound this value won't be changed. That is the rule behind bind function. So the this won't be changed from obj to window here.

Answer 2

this keyword behaves a little differently in difference context.

Global context

In the global execution context (outside of any function), this refers to the global object, whether in strict mode or not.

Function context

Inside a function, the value of this depends on how the function is called.

Simple call

function foo() {
    console.log(this)
}

In non-strict mode, this will default to the global object

In strict mode, this will default to undefined

call or apply

function foo() {
    console.log(this)
}
var o = {'name': 'test object'};
foo.call(o) // log object `o`

this can be bound to a particular object in the call using the call or apply methods.

bind

bind method return a function that use specific object by bind as this object in the function.

function foo() {
    console.log(this)
}
var o = {'name': 'test object'};
bar = foo.bind(o)
bar() // log object `o`

Refer to this link for more information: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Explain

in this case obj.foo(); this of function foo is obj , so this.a refer to obj.a

in this case setTimeout( obj.foo, 100 ); obj.too is a reference to the function foo . setTimeout will execute it in global context.

in this case setTimeout( obj.foo.bind(obj), 100 ); , obj.foo.bind(obj) return a reference to a function which bind this with obj . setTimeout will execute it in context of obj

Answer 3

You need to understand how this behaves. It's called function execution context and you can read more about here .

In the first case, the function is called in the context of the object obj , since property accessor . is used ( obj.foo ) and hence this points to obj .

In the second case, you pass the standalone function to setTimeout and it will be called in the global context, this pointing to window. obj.foo() is not the same as var f = obj.foo; f() var f = obj.foo; f()

In the third case, you bound the context of a function call to obj , and this points to obj again. Read more about bind here .

Answer 4

Try putting an alert(this); inside foo() method to understand the context.

obj.foo(); => runs in object context and hence result will be value of a inside obj => 2

setTimeout( obj.foo, 100 ); => runs in window context and var a = 4 being in the window context, this.a gives 4 ( this here is window )

and the last line will again have the object context => 2