Things you probably didn’t know about `this` in JavaScript

Tram Ho

Hello everyone! (bow)

For those who have studied English, it is no stranger to the sentence “What is this?”. Yes, this is here, this is there, this is everywhere. So in the realm of JavaScript programming, this pointer is an important concept. Understanding it as this 1 or this 2 will help avoid unwanted bugs when working with Javascript. Therefore in this article we go to clarify with this keyword offline.

What the hell is this ?

When you encounter this keyword in programming languages ​​like Java, C #, etc., you will most likely think of this as a reference to the current instance or function. This is also the reason that many people misunderstand about this keyword in Javascript , especially the new ones you use and use Js.

In Javascript , this is a keyword whose essence is the same as its name, which refers to the object currently being used or accessed. Quite similar to the definition of this in other languages, right, but in Js this has a different value depending on the context ( context ) being used.

For example: Through Va’s wild day, I have taken my girlfriend to the most luxurious restaurant in Hanoi. (Imagine you guys! Huhi) When the food was brought out, my girlfriend asked “What is this?”. I said it was Ocean Lobster. Then she pointed to the bowl of soup and asked “What is this?”. I said it was Shark fin soup. Here, this sometimes is Lobster, sometimes Shark Soup. The meaning of this is always accompanied by context (context) – table where two people sit, and Food and the body language of his girlfriend. The same is true in Javascript.

Example 1:

Example 2:

Through the above example, we can see that this is really only a constraint that is created until the function is called, and what it references is determined by the call-site where the function is called. So what is the Call site ?

Call site?

The call site is where the function is called , not where it is declared. So where is the function called?

Call stack is a concept that indicates the position of the thread when the program is executing. When the function is called (call), it is stacked into piles 1 (stack). The call-stack will push the function ( push ) when it is called ( call ) and throw the function ( pop ) off the stack when the function returns .

For example:

The rules apply to this

Rule 1 – New binding (Appears keywords new ):

this is the newly created object with the new keyword.

When we call a function with the keyword new , the following will be done:

  1. Create a new object.
  2. Link this new object to another object.
  3. this is bound to the newly created object in step 1.
  4. Returns this if the function does not return the object.

Rule 2 – Explicit binding:

this is an object specified. Is the function called with call , apply or bind ?

Distinguish call , appy and bind

  • call : call the function immediately and allow pass arguments one by one.
  • apply : call the function immediately like a call, except that it allows pass an array with one or more elements.
  • bind : do not call the function right away but return a new function.

Rule 3 – Implicit binding:

The first thing to note is that the function foo () is initialized, then referenced by an attribute in obj, we understand that the function is surrounded by an object (in this case, obj).

Call site uses obj to refer to the function, we understand this rule is obj will be referenced to this when the function foo is called, or can understand this.a here is obj.a here.

Also remember that only the last obj in the calling string will be referenced as in the following example:

Rule 4 – Default Binding:

this is window object (browser) or global object (nodejs) or undefined (use strict) .

summary

  • this binding depends on the context .
  • Call site is where the function is called.
  • Call stack is a concept that indicates the position of the thread when the program is executing (execution).
  • Bốn quy tắc in order of precedence determine this:
    1. Keyword new .
    2. Explicit binding (binding document): this is called specific object with the call, apply and bind.
    3. Implicit binding (binding offline): this is the object containing context.
    4. Default Binding : this default is global / window object or undefined if strict use is used.

References

Share the news now

Source : Viblo