Javascript this? Understand in simple language

Many javascript developers either newbie or experienced developer confused with this. You will find all about this keyword in easy language

What is this?

In our natural language, we use this to refer to current Environment Objects:

The person sitting inside the house

If a person sitting inside the house says: this address so it means the address in which a person is currently present.

So we are inside the house so you can refer to the house like this.

Note: Understand the difference between method and function

Function vs Method

In javascript, this works like that —

1. “this” inside Global Scope

By default this point to the window object of browser

2. “this” inside an Object

If you are inside an Object so this will refer to the Current Object

this inside Object

@openDoor is a method of Object: this.myHome, newHome

3. “this” inside a Function

If you are inside a function so this will be undefined (if using javascript in strict mode) otherwise this will point to the global object

We should not use this direct inside a function (but we can use this in method- the function inside an Object)

Example 1: Here this loses its scope when js running in strict mode

example 2:

this inside function can’t access it lose it scope

4. ‘Call’ function to access Object/this in a local function or method

Syntax: function.call(Object)

Using call function we can pass the reference / Object

Now openDoor function can access this

It means execute openDoor function as a method of this

Pass some parameter with call : openDoor.call(this, “Shivam Gupta”);’

Pass some parameter when pass object with call

Now can I call local openDoor() with Object this.myHome and newHome?

1. Yes Firstly remove all openDoor() declared inside the Objects.
2. Use call() with function name and pass diffeent Objects

By this: We can use somebody else method to somebody else Object using call

5. ‘this’ inside an inner function

Again i will say: Inside a function using this is not useful untill use: call, bind, apply

this will not work in inner function

There is 3 solution for above problem

1. Use a variable: ex. that outside of innerFunction because outside of innerFunction this is available

Not a very good Approach

2. When call innerFunction so use call/bind to bind current this for innerFunction:

Better than first one but still not best

We can also use bind: bind basically creates a new function with current this

.bind() return a function so we call again lets break:

3. Best way: use Es6 arrow function

Arrow functions are a special type of function. It takes this from outer scope to inside function scope

Arrow function will use this of openDoor() scope by default

6. this inside Constructor

In this example we are creating Object multiple times see:

Every time when creating new Home so define new objects like this.myHome, newHome..

So instead of creating Object like this, we will create constructor so no need to create Objects every time like this

Constructor is just function

Define createHome constructor for creating new Objects

We can concise our code like every time i need to use call methos so we can put openDoor function in prototype of constructor function: createHome

We use openDoor() inside prototype because of it automatically us this of its parent Function (createHome) so we don't need to pass externally this by — call/bind.

7. this inside classes

Use ES6 Classes instead of the constructor function for creating Objects and prototype methods in a cleaner way see:

Best way to create Object

If like this post please give a clap . Write in the comment section for any Question or suggestion. Thanks!