Understanding 'this' in Javascript

By definition 'this' in Javascript refers to the object it belongs to and it can also be referred to as a property of the execution context Let's look at some examples of how 'this' refers to the object it belongs to or the property of the execution context

1) 'this' refers to the object it belongs to

const obj = {
    name : "John",
    age : 21,
    getName : function(){
        console.log(`The name is ${this.name}`)
    },
    getAge: function(){
        console.log(`They are ${this.age} years old`)
    }
}

obj.getName()
obj.getAge()

Output :

The name is John

They are 21 years old

Explanation :

getAge and getName are methods of the object 'obj', hence 'this' refers to the object 'obj' which has properties 'name' and 'age'

2)'this' within the context of a regular function

function blogPost(){
    console.log(this)
}

blogPost()

Output :

Window object

Explanation :

'this' inside a regular function refers to the owner of the function and in this case since the function is defined in the global context, 'this' refers to the global(window) object

3)'this' within the global execution context

console.log(this)

Output:

Window Object

Explanation :

In the global context, 'this' will always refer to the global object(window)

4)'this' in a regular function when it is bound to an object

We have seen previously in example 2 that the output of the following code will be the window object

function blogPost(){
    console.log(this)
}

blogPost()

But by using methods like bind, apply and call we can explicitly bind an object to a particular function which in turn calls the function like a method of the object

function blogPost(){
    console.log(this)
}

const blogObject = {
    id : 123,
    name : "Learning JS"
}

blogPost.call(blogObject)

Output :

{ id : 123, name : "Learning JS" }

Explanation :

Explicit binding calls the function like it's a method of the blogObject

5)'this' inside an arrow function

The important concept to note here is that arrow functions don't have their own 'this' and 'this' inside an arrow function refers to the 'this' of the nearest parent object

const arrFn = () => console.log(this)
arrFn()

Output :

Just like a regular function the output will be the global(window) object

6)'this' inside an arrow function which is a method of an object

const obj = {
    name : "John",
    age : 21,
    getName : function(){
        console.log(`The name is ${this.name}`)
    },
    getAge: () => {
        console.log(`They are ${this.age} years old`)
    }
}

obj.getName()
obj.getAge()

Output :

The name is John

They are undefined years old

Explanation :

getName() is a regular function method while getAge() is an arrow function. Since arrow functions don't have their own 'this' and refer to the nearest parent which in this case is the object 'obj' whose 'this' refers to global(window) object and the window object doesn't have any property called age

Hope this helps you in understanding the concept of 'this' in JS. Please let me know in case of any error in my explanation Looking forward to your feedback

Thanks