How does this keyword work in JavaScript?

In this tutorial, we will learn how this keyword works in JavaScript.

For JavaScript developers, defining the context that this refers to is one of the most confusing topics.

There are 4 rules which help us to define the context of this:

1. Default Binding

var mythisfun = function() {
   console.log(this.x); 
} 

 var x = 199 ;
 mythisfun(); //199

We defined the variable x in the window context so the output of the mythisfun() call will be 199 because this will refer to window context which it’s the default context.

Here, the output of the mythisfun() call will be 199 because this will refer to the default context.

2. Implicit Binding

var ankit = { 
   name: 'Ankit', 
   greet: function(person) { 
         console.log("Hello " + person +", my name is " + this.name);
   } 
 }

 ankit.greet("Mayank"); // Hello Mayank, my name is John 

 var itbhu = ankit.greet; 
 itbhu("Mayank"); // Hello Mayank, my name is

In Implicit Binding, The object that is adjacent to the dot(.) is what this keyword will be bound to.

3. Explicit Binding

function expli() { 
   console.log(this.name); 
} 

var num = { 
  name:'Ankit' 
} 

expli.call(num, arg1, arg2, ...); // Ankit

In some cases, instead of putting a property function reference, the function call uses any particular object for this. Explicit binding is used in this case.

Methods such as bind(), call(), and apply() play a major role in this.

4. New  Binding

function newBind() { 
       /* 1- create a new object using the object literal
       var this = {}; */ 

      // 2- methods and properties 
         this.name = 'Mayank'; 
      this.say = function () { 
      return "He is " + this.name; 
       }; 

      // 3- return this; 
} 

var name = 'Ankit'; 
var result = new newBind(); 
console.log(result.name); // 3

Object is created with the help of new keyword. this created in this function binds to this object.

Also, read: Round float numbers in JavaScript