All you need to know about “This” in Javascript

Tram Ho

Question

I see many of you find this keyword in javascript very difficult to grasp, difficult to get used to and even though you have searched for articles and videos on the internet explaining this keyword, but in many cases , you still do not understand and explain why this returns this value instead of that value, … @ [email protected] So today, I decided to write a full note of the What do you need to know about this in js .

Some terms used in the article

Constructure function:

Similar to class in OOP , hướng đối tượng languages, used to initialize object that share a common characteristic. The thing is, any function in js (except for the arrow function – which I will talk about later in the lưu ý ) can become a constructure function.

Method:

You can understand a method is a function of an object .

1. Okay, so what is this?

Very concise!

this is simply a variable and this variable returns the nearest object that contains it.

Let’s analyze the above example. In the above example, I created a constructor function named ConstFunc , this function will return this variable when it is run.

  1. At the first run, this returns the window because the nearest object containing this keyword when this is window .
  2. At the second run, because I khởi tạo an object from ConstFunc , the nearest object containing this is ConstFunc , not a window anymore.

Quite troublesome, isn’t it 😅😅😅 , now everyone, please continue reading the following sections to better understand what I wrote.

1. This returns window (global object)

If you don’t know, all our code is surrounded by window ( global object ), so when we call this but it is not surrounded by another object , this will return the window .

2. This returns an object other than the window

As I said, this will return the closest it contains, which is also true when this is placed inside a method of an object .

4. This in the Event

This in the event will return the element attached to that event.

5. Note

Strict mode

If we use strict mode , this in the functions will return undefined (except the method ).

Arrow function

The value that this is in a arrow function returns will be inherited from this of the function / method , where that arrow function is declared and no longer returns the nearest object contains it. In case an arrow function not declared inside any function, this arrow function of that arrow function will return the window .

One more note about the arrow function I want to share with you is because this arrow function of the arrow function will return undefined if it is not declared inside any one function , so the arrow function should never be used. Used to make the constructure function or the method of an object initialized with object initializer (you can understand this means that object are declared like this: var obj = { ... } ) 😅😅😅 .

Epilogue.

In this article, I do not list out the specific cases that you must remember when using this as in other articles to give people a different view of this keyword. Through this article, I hope everyone can really understand and master this without having to memorize or remember any of this situation . Have a nice day. Cheers!

Share the news now

Source : Viblo