“This” keyword in javascript is a constant source of confusion. The value of this depends on where it is getting called. “This” is not a reference to the function nor a reference to the lexical scope. It is a binding that is done while calling the function.

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

Here, the value of “this.a” depends on where it is getting called. There are 4 different ways by which “This” gets bound.

1.Default binding

This is a simple and straightforward type of binding, in this binding, we call the function from the global scope, and “this” points to the global. Eg

function foo() {
 console.log( this.a );
}
var a = 2;
foo(); // 2

Here “this” keyword is used inside the foo function, by definition, “this” keyword will depend on the caller. Here foo is called from the global context so “this” will point to the global variable and it will print 2 because we have declared a = 2.

2. Implicit Binding

In this binding, the “this” keyword points to the object context that calling the function. Consider the following example.

function foo() {
 console.log( this.a );
}
var obj = {
 a: 3,
 foo: foo
};
var a = 2;
obj.foo(); // 3

Here the “this” keyword points to the obj and therefore 3 gets printed instead of 2.

3. Explicit Binding

This is an important category/rule for binding “this”. In the above 2 cases, “this” dependent on where it is getting called from. Consider a case where you want to control or fix “this” value irrespective of from where it gets called. To achieve that Javascript provides 3 functions. They are :

1. call

function foo() {
 console.log( this.a );
}
var obj = {
 a: 2
};
var a = 3;
foo.call( obj ); 

The call method allows us to pass the “this” context to the function. Here even after calling foo from a global context, it is pointing to the obj context.

2. apply

This function is the same as the call method but differs only on how parameters are passed.

3. bind

Bind is also similar to call and apply, which allows us to pass “this” context to the function but bind also provides a reference to call the function later while apply and call methods calls the function inline.

function foo() {
 console.log( this.a);
}
var obj = {
 a: 2
};
var bar = foo.bind( obj ); // refernce to the function
bar(); // 2 can be called later

You can find the differences between these 3 functions here

4. new Binding

When an object is created using the new keyword in javascript, the “this” keyword points to the newly created object. Example

function foo(a) {
 this.a = a;
}
var bar = new foo( 2 ); // 2 is assigned to the bar
console.log( bar.a ); // 2

Here, when a function is called with the new keyword, this points to the newly created object.

Final Thought:

“This” keyword binding falls in one of the four categories mentioned above. If you came across a scenario where this fails you possibly encountered an exception. To know more about the exceptions refer to this Chapter 1 & 2.