MYLS (Make Your Life Simple)
Understanding “this” concept in javascript
In this article I will share my understanding and approach on how I deal with the ‘this’ object in javascript. Before diving into the topic one must understand the difference between following invocation types because the reference of ‘this’ object changes in each invocation type.
- Function Invocation
- Method Invocation
- Constructor Invocation
- Call / Apply / Bind (C.A.B)
FUNCTION INVOCATION

In the above code snippet, we can see the basic function invocation example which is returning the full name i.e. the combination of firstName and lastName. In function invocation, ‘this’ refers to the global object and in the first line I have assigned the property ‘lastName’ to the global object ‘this’.
If we use “use strict” expression at the top of our programme or inside function, it prevents us from gaining the access to global object. So nowadays people don’t prefer function invocation approach.
METHOD INVOCATION
First question that might come to your mind that what’s the difference between method and function. When a function is defined as a property of an object literal then we call that function as method or when we access/invoke the function from the object literal at that time we call it as method invocation.

In the above code snippet, I am trying to invoke add function from obj object (obj.add()) hence it represents the method invocation case. So inside the add function scope ‘this’ will refer to the object ‘obj’, if I try to access property ‘value’ from this object i.e. this.value , it will print 5.
Note: In method invocation ‘this’ object does not refer to the global object whereas it represents the object(obj) from which the function (add) got invoked.

In the above code snippet ‘Function within function’, if we directly try to print ‘this’ object inside sub function scope, it will print the global object [object Window] because it represents the function invocation rather than the method invocation.
In order to access the obj properties via ‘this’ object first we need to assign this object to self variable in the outer function scope i.e. add function. Instead of self we could use any other variable name as per our business requirement.
Note:- In case of method invocation, if there is a scenario of function within a function and you want to access the object (obj) properties via ‘this’ inside the inner function so you need to assign ‘this’ object to a variable(self) in the outer function scope and further use that variable (self ) in the inner function to access the object(obj) properties.
The expression return (self.value — self.value), will return (5–5 ) i.e. 0 because self represents the ‘obj’ object and we try to access the ‘value’ property from self variable.
CONSTRUCTOR INVOCATION
Constructor are basically functions that are used with new operator to create one object instance. Several built-in JS constructors are Object, Array & Function.

In the above code snippet, the new operator is placed before the function ‘Behaviour’ resulting into constructor invocation. The object instance gets created and assigned to the variable ‘b1'.
So the ‘this’ object written inside the function ‘Behaviour’ represents the ‘b1’ instance of an object ‘Behaviour’. Now if I add/assign new properties into ‘this’ can be accessed via object ‘b1’.
Note :- In case of constructor invocation ‘this’ object always represents the object ‘b1’ ,created by instantiating a constructor i.e. new Behaviour().
Now if I try to print b1.mood, I will get “happy” being printed because b1 represents the ‘this’ object inside the function ‘Behaviour’.
CALL /APPLY/BIND
The main purpose behind using call, apply and bind w.r.t ‘this’ object was to make the reference value of ‘this’ to be dynamic i.e. we can assign the value of ‘this’ to any object as per our choice.
In case of function invocation, this always refer to the global object.
In case of method invocation, this refers to the object from which we invoked the function, this will always refer to that object only.
In constructor invocation, this will always refer to the object, created by instantiating the constructor i.e. new Behaviour in our above example.
CALL METHOD

In the above snippet ‘call method’, we have 3 objects which we will passing as the parameters of call method. The 3 objects are as followed -
- this which represents the global object
- person1 which contains name property
- person2 which contains name property
The first parameter of call method represents the value of this and the second one represents the value being passed as an argument to the function sayName.
In the first console.log statement, we are assigning the global object to the ‘this’ object written inside the sayName function, so this.name will print ‘Michael’ as this represents the global object and label will be “Global”.
In the second console.log statement, we are assigning the person1 object to the ‘this’ object written inside the sayName function, so this.name will print ‘Nicholas’ as this represents the person1 object and label will be “person1”.
In the third console.log statement, we are assigning the person2 object to the ‘this’ object written inside the sayName function, so this.name will print ‘Greg’ as this represents the person2 object and label will be “person2”.
APPLY METHOD
The apply method is similar to the call but the only difference between call and apply method is that the second parameter is passed as an array.
Below is the code snippet of how to implement apply.

In the above snippet we can see the second parameter is passed as an array that’s the only difference between call and apply. In order to get the value from the array we need to pass the same number of arguments as the number of elements in the array.
As we can see in the first console.log statement, we passed 2 elements in array ‘Global’ & ‘value’ and in order to print them inside the function we have 2 arguments ‘label’ & ‘_val’.
‘label’ represents ‘Global’ whereas ‘_val’ represents the ‘value’. Same goes with the other console.log statements.
BIND METHOD
Check the below code sample for bind()

In the above code sample for bind() we are returning a bound function with the context which will be invoked later. We can see the bound function in the console as below .

The first parameter to the bind() method sets the value of “this” in the target function when the bound function is called. Please note that the value for first parameter is ignored if the bound function is constructed using the “new” operator.
The rest of the parameters following the first parameter in bind() method are passed as arguments which are prepended to the arguments provided to the bound function when invoking the target function.
That’s all for now. Thank you for reading and I hope this post will be helpful for beginners.