What is “this” in Javascript

Take a look at the following person object. It contains the method sayHello. How do we get to the person’s name from within sayHello?

We use “this” keyword to access the person object.

Inside the sayHello function, the this keyword refers to the person object. Using this keyword, we can refer to all properties and methods of the person object inside the sayHello function.

            
person= {
    name:"Gregory Peck",
    sayHello:function () {
        console.log("Hello "+ this.name)   //using this here
    }
}
person.sayHello()   // Hello Gregory Peck
                
        
    

We say this is bound to the person object inside the sayHello function.

this is an object to which function is bound to in the run time. The run-time binding of a function can change depending on how we invoke it. If there is no binding is found, then it defaults to the global object in nonstrict mode and undefined in strict mode.

Why “this” in JavaScript is so Confusing

In languages like c#, java, etc., this always points to the current class instance to which the method belongs. This is very intuitive and easy to grasp. The methods are bound to the class. You cannot change those bindings.

But there is one critical difference between functions in JavaScript and those in c# or Java. In JavaScript, functions are objects. They are not bound to anything. So, you can assign them to another variable, pass them around, etc.

But there is one critical difference between functions in JavaScript and those in c# or Java. In JavaScript, functions are objects. They are not bound to anything. So, you can assign them to another variable, pass them around, etc.

The obj object declares the foo function and becomes the obj‘s method. When we invoke the foo function using obj.foo(), it prints the value of a (i.e., 10) from the obj and not from the global value of a. Here this inside the foo points to the obj itself. This is precisely how this works in C# & Java.

            
a=1;
 
obj = {
    a:10,
   
    foo:function () {
        console.log(this.a)
    }
}
 
obj.foo()   // 10

                
        
    

In the following example, we copy foo to another variable, boo. Now boo also points to the foo function, but it is not associated with the obj.

When we invoke boo, this points to the global object rather than foo. That is why it prints 1 instead of 10.

            
a=1;
 
 obj = {
     a:10,
    
     foo:function () {
         console.log(this.a)
     }
 }
  
 boo=obj.foo
  
 //Both of these call the foo function. But get different value for 'this' 
 obj.foo()   // 10   'this' is obj
 boo()       // 1    'this' is global object
  

                
        
    

We can also assign the function as the property of another object. The following example attaches foo to another object, obj2. When we invoke obj2.foo(), this of the foo points to obj2.

            
obj2= {
    a:100,
    foo:obj.foo
}
 
obj2.foo(); // 100
 
  

                
        
    

So when you declare a function, you will never be sure what would be its “this". Because it never depends on where you declare it. But it depends on how you use it. The same function invoked differently gets different values for this.

            
obj2= {
    a:100,
    foo:obj.foo
}
 
obj2.foo(); // 100
 
  

                
        
    

This outside a function

The value of this outside of a function is always the global object.

The global object always exists in JavaScript applications. But what value it takes depends on where we run our app.

Inside the browser, the global object is window, while in NodeJS it is an object named global. The value does not depend on strict mode.

        
 console.log(this)  //Always window inside a browser, global inside a NodeJs
  
    
        
    

How to identify this in Javascript

Value of “this” inside a function depends on how & where we invoke the function and whether the strict mode is enabled or not.

There are four ways in which you can invoke a function. They are

1. Function Invocation
2. Method Invocation
3. Constructor invocation
4. Explicit invocation

Each of the above Invocations sets the value of this differently. In the case of function invocations, the Strict Mode also affects the value of this.

Function Invocation or Default Binding

When we invoke a function as a standalone function (not as a property of an object), then we call that function Invocation.

In a function invocation this is bound to the global object in “not strict” mode. But if we use “strict” mode this is always null.

The window object is the global object in the web browser, while in NodeJs an object called globalThis is the global object

        
function hello() {
    console.log(this==window)  //Window
}
 
hello()    //'this' here is window
  
    
        
    

Invoking a Function expression.

hello = function() {
console.log(this==window)  //Window
}

hello()    //'this' here is window

But in a strict mode, this is undefined

"use strict"

function hello() {
console.log(this==window)  //false
console.log(this)          //undefined 
}

hello()    //'this' here is undefined

You can also use use strict inside the function, but it must be at the beginning of a function.

function hello() {
"use strict"
console.log(this == window)  //false
console.log(this)          //undefined 
}


hello()    //'this' here is undefined becuase hello uses  "use strict"

Method Invocation (Implicit Binding)

The method is the function that we declare as the property of an object. When we invoke the method using the property accessor ( using dot or [] ), we call it method invocation.

In a method invocation, the object that invokes the method becomes the this of the method.

The following codes are examples of method invocation.

        
foo.getName();       //this == foo 
foo["getName"]()     //this == foo 
 
 
boo.getName();      //this == boo
    
        
    

The last level of the object becomes this. In the following chained call foo comes last. Hence it becomes this.

        
boo.foo.getName()   //this == foo
 
    
        
    

The getName method inside foo, boo & bar refers to the global getName function.

        
getName = function () {
    console.log(this.name)  
}
 
 
foo = {
    name:"foo",
    getName:getName
}
 
 
foo.getName();      //foo
 
 
boo = {
    name:"boo",
    getName:getName
}
 
 
boo.getName();      //boo
 
 
bar = {
    name:"bar",
    foo:foo,
    boo:boo,
    getName:getName
}
 
bar.foo.getName()    //foo
bar.boo.getName()    //boo
bar.getName()        //bar
    
        
    

Remember dot is not the only way to invoke a method. You can also make use of a bracket.

        
var counter = {
    value: 0,
    increment: function () {
       console.log(++this.value);
        
    }
};
 
counter.increment();     //'this' = counter
counter["increment"]();  //Another way to invoke a method
    
        
    

        
var val=10          
 
let obj = {
 
    val:100,            //property of the obj
 
    outer:function() {
 
        //'this' here is obj. 
        // Hence we can access its property
 
        console.log(this==obj)  //true
        console.log(this.val)   //100
 
        let inner = function() {
 
            //'this' here is window not obj
            console.log(this==window)  //true 
 
            //val comes from the golbal variable            
            console.log(this.val)      //10
        }
    
        inner();   //function invocation.'this' is window
    
    }
};
 
obj.outer();  //method invocation 'this' of outer function is obj
    
        
    

var val=10          
 
let obj = {
 
    val:100,            //property of the obj
 
    outer:function() {
 
        //'this' here is obj. Hence we can access its property
        console.log(this==obj)  //true
    
        //define a local variable `that` and store `this` in it. 
        let that=this;          
 
        let inner = function() {
 
            //'this' here is window not obj
            console.log(this==window)  //true 
 
            //`that` comes from the parent scope
            console.log(that==obj)     //true 
 
            //use that
            console.log(that.val)      //100
        }
    
        inner();   //function invocation
    
    }
};
 
obj.outer();  //method invocation

var val=10          
 
let obj = {
 
    val:100,        
 
    testFunction:function() {
        console.log(this==window)    //Check for globalThis if you using nodeJs
        console.log(this==obj) 
        console.log(this.val)     
    }
};
 
fn= obj.testFunction;  //assigning to a varible
 
obj.testFunction() //method invocation. 'this' of testFunction function is obj
 
//false
//true
//100
 
fn()  //function invocation. 'this' of the testFunction function is window
 
//true
//false
//10
 

fn= obj.testFunction.bind(obj);  
fn()
 
//true
//false
//100
 
 

Constructor Invocation or New Binding

We can also invoke a function using a new Operator. We usually use the new operator on a Constructor function to create a new object. But we can use the new operator on any function.

If the function is invoked with new keyword, then the this is a new object

        
function hello() {
 
 //It is not window
 console.log(this==window)  //false

 //it is not even hello
 console.log(this==hello)  //false

 //'this' is an empty object
 console.log(this)
}


new hello();   //constructor invocation. 'this' is a new empty object

    
        
    

If you invoke a function without new keyword it will be a function invocation. In that case the this will be global object

        
//this is a function invocation. 
//'this` is global object
hello();
 
    
        
    

You can read more about constructor function and new operator

Explicit Binding

We can also set the value of this explicitly. i.e. we pass the value of this, when we invoke the function overriding the JavaScript generated this. This is useful when we make use of the callback functions

There are three methods that allow us the set the this of an object. All of them are available in the function.prototype object.

1. Call
2. Apply
3. Bind

        
var a =1
 
function foo() {
  console.log( this.a );
}
 
var boo = {
  a:10,
  foo:foo
}
 
 
var bar = {
  a: 100
};
 
foo();     //5  Function invovation, 'this' here is global object
boo.foo() //10  Method invocation.  'this' is boo
 
//Explicit binding
 
foo.call(bar);        //100  Sets 'this' of foo to bar and invokes it
boo.foo.call(bar)  //100  Sets 'this' of foo to bar and invokes it
 
    
        
    

                            
var a =1
 
function foo() {
  console.log( this.a );
}
 
var boo = {
  a:10,
  foo:foo
}
 
 
var bar = {
  a: 100
};
 
foo();     //5  Function invovation, 'this' here is global object
boo.foo() //10  Method invocation.  'this' is boo
 
//Explicit binding 
 
foo.apply(bar);     //100  Sets 'this' of foo to bar and invokes it
boo.foo.apply(bar)  //100  Sets 'this' of foo to bar and invokes it

                            
var value=10
 
 obj = {
   value:100,
   show:function() {
     console.log(this.value)
   }
 }
  
  
 obj.show()      //100   method invocation 'this' is obj 
  
 s1=obj.show     //function separated from the obj
 s1()            //10    Function invocation 'this` is global object. 
  
 //Using bind
  
 s2=obj.show.bind(obj)   //s2 is a function now hard bound to obj
 s2()            //100  Function invocation. but function is hard bound. hence 'this' is global object
 s2()            //100  

                            
function bind(fn, obj) {
   return function() {
     return fn.apply( obj, arguments );
   };
}  

Exceptions

There are Exceptions to the above rules of determining this.

                            
var person = {
    firsName:'Alex',
    lastName:'Ferguson',
    getName: () => console.log(this.firsName+' '+this.lastName)
 
}
 
person.getName();   //undefined Method Invocation. But Since it is an arrow function 'this' is global object

                            
var person = {
    firsName:'Alex',
    lastName:'Ferguson',
    getName()  {
        console.log(this.firsName+' '+this.lastName)
    } 
 
}
 
person.getName();   //Alex Ferguson Method Invocation.'this' is person

This in an ES6 Module

Inside an ES6 Module but outside the function this is always undefined. Also, ES6 Modules always runs on strict mode.

Hence the value of this inside a function invoked using function invocation is always undefined in an ES6 Module. However, the other types of function invocation like method, constructor invocation & explicit bindings work as mentioned above.

Precedence

It also important to know the Precedence of this binding. It is actually possible two bindings in a function call

1. New binding or constructor calls
2. Explicit Binding
3. Method invocation or implicit binding
4. Default binding

Default binding

        
obj1= {
    name:"Bill",
    hello: function() {
        console.log(this) 
    }
}
 
 
obj2= {
    name:"Alex",
    hello: obj1.hello
}
 
hello=obj1.hello;
 
 
hello()           //'this' = window   
obj1.hello()       //'this' = obj
 
//New
new obj1.hello()   //'this' = new object.  new takes precedence
new obj2.hello()   //'this' = new object.  new takes precedence
 
obj1.hello.call(obj2)  //this = obj2.  binding has higher precedence
    
    
        
    

Summary

Finally the summary of determining the this

1. If we invoke the function with a new operator, this is always a new object.
2. The function invoked with the call, apply & bind methods uses the first argument as their this. But if you pass null or undefined as the first argument, they use the default binding.
3. The method invocations use the context object (i.e., object left of the dot notation)
4. If all of the above fails, then use the default binding. It is null in the case of strict mode. Else global object (window in browser, global in NodeJs).