What are the rules of determining value of keyword “this” in JavaScript?

Determining the value of the keyword “this” is crutial when we plan to write extensive level of JavaScript. If we want to know how the value of the keyword this is set we can first read this article. There are four (4) common rules to determine keyword this. The following four (4) rules are sort of patterns of determining value of the keyword "this". There will be cases outside of the following patterns:

4 rules to determine the value of the keyword “this”

• Default binding
• Implicit binding
• Explicit binding
• New binding

Lets explain all 4 rules with example:

Default binding

In the global context if we have a function declaration and if we call that function from the global context then the special object this points to the window object. In that case window.name is equls to this.name. That’s why when we run the program it prints name from global context.

// In Global context 'this' == window object
function  getName() {
    console.log(this.name);
}
var name = "Jefferson Smith";
getName();

Implicit binding

When the execution context surrounded by an object then the special object ‘this’ is set to that object. This binding is called implicit binding.

var name = "Joe Smith";
var myObj = {
    name: "Jennifer Smith",
    getName: function () {
        console.log(this.name);
    }
}
myObj.getName();
// Here this == myObj

In this case the getName method is surrounded by myObj. So, on the execution of myObj.getName() the special object is set to myObj.

Explicit binding

In case of explict binding we force the function to bind with a specific object. JavaScript provies two methods in function prototype. Those methods are:
1. call ( comma )
2. apply ( array )
As those methods are in function prototype, so they are available to all functions. When we use them we can explicitly tell which object to use for a function context. The special object this then becomes that object.

var myschoolObj = {name: "Jefferson Smith"};
var myObj = {
    name: "Jef",
    getName: function () {
        console.log(this.name);
    }
}
myObj.getName.call(myschoolObj); 
// another method called: apply can be used too. 
myObj.getName.apply(myschoolObj); 

New binding

In JavaScript we do have a keyword called new that is not similar to traditional object oriented programming. But it has some similarities. When we use new operator in fornt of a function it does following things:

• A new object is created
• The newly constructed object is [[Prototype]]-linked
• The special keyword this is set with this newly constructed object
• The new-invoked function will return the newly constructed object if the function does not explicitly return something else

function myFunc() {
    this.name = 'Jefferson Smith';
    this.getName = function () {
        return "I am " + this.name;
    };
}
var obj = new myFunc();
console.log(obj.getName()); // I am Jefferson Smith.

In the above code example we are constructing an object called obj using the keyword new. This object has the access to all the properties of myFunc function. That’s how we are able to call obj.getName().

Precedence order of 4 rules

New binding <==== Explicit binding <===== Implicit binding <====== Default binding