“this” Object in ES5 vs ES6

In the last story, we discussed choosing the keyword ‘this for ES6’ & ‘super for ES5’ to access the parent class methods from the child class. It says, in ES6 ‘this’ keyword refers to the parent object, but in ES5 the ‘super’ keyword did.

Let’s see how the value of “this” varying at the functional level.

Case1: Code Pen
A simple JavaScript function that consoles the log of “this” keyword in both ES5 vs ES6. In the example below, thisValueInES5() & thisValueInES6() returns the same global object.

Case 2: Code Pen
A simple JavaScript function placed inside an object that consoles the log of “this” keyword in ES5 vs ES6.

Case 3: Code Pen
An ES5 function and the function has one inner function in ES5 standard placed inside an object that consoles the log of “this” keyword.

In the example below, the outer function of ‘this’ refers to the parent of the function being called. But, the inner function of ‘this’ refers to the global context because of getting undefined when tried to access this.firstName.

Case 4: Code Pen
An ES5 function and the function has one inner function in ES6 standard placed inside an object that consoles the log of “this” keyword.

In the example below, the ES5 standard outer function of ‘this’ refers to the parent of the function being called. But, the ES6 standard of the inner function of ‘this’ refers to the parent context, whatever this value is available in the outer function, the same refers to the inner function.

The below table provides how ‘this’ object is represented based on their parent object with the standard of function.

Hope it will give a clear view of the representation of “this” object in ES5 vs ES6, Please write your questions for any doubts or corrections.

Let’s discuss the next feature of ES6 in the next story.
Next topic: Callback function