The difference between call, apply and bind in JavaScript

Tram Ho

Welcome to the basic JavaScript series for Beginner ^^

Today we will continue to learn about this and the difference between call , apply , bind in JavaScript

What is this?

Pointers this is probably a very familiar concept in non-object-oriented programming, it represents the object containing it, to himself as an example for you easy to imagine:

A hands-on Java programming courses in the morning, but at a still sit gaming

A has a Java programming practice tomorrow, but he still plays games

Can see the two sentences completely synonymous with each other but in spoken and written we often use the second way, right ^^

So what is this here? According to the above statement, we can see that this is used as a personal pronoun to replace the previous specific object.

How to use this? And when to use this?

Before starting, I will kick through this keyword in PHP ‘s object-oriented programming .

As we all know, each object will have its own properties and methods, right 🤔.

In the above code we can see that this is a pointer, pointing directly to the object surrounding it and representing that object always, so when we call $ this-> name, it is assigned to the object’s name attribute. student

Just like the pronoun pronouns in spoken language, this represents the object (Object) in a context (context) mentioned earlier.

This is in JavaScript

Before going into this in JavaScript, we will talk a little bit about functions, as we know in JS, a function (Function) is also considered as an object (Object) and of course, as I said above above, the object will have its own properties. In JS, when a function is called, it will have an attribute this , and this property contains the value of an object that is calling this function.

In JS this is used as follows:

  1. In a method, this is referred to the object that contains it
  2. If you stand alone this refer to the Global Object (Window)
  3. In a function this refer to Global Object (Window).
  4. In a function (strict mode) this is not defined
  5. In an event, this is referred to the element that received the event

1. This in a modal

2. This when standing alone

3. This when inside a function

4. This when inside a function with strict mode

5. This in an event

This can also be used in callback functions , closures , borrowing methods and in the case of being assigned to another variable . But before we get into how to use it, we will go through the call , apply and bind 🤧.

What is call (), apply (), bind ()? Why do we need it?

The three call , apply and bind functions are prototypes of Function . So only Function can call these 3 functions. The reason, a function can call another function because in JavaScript, a function is also an object type, which is an object will have a prototype or in other words, call its method.

Call

Inside :

  • The function is the function we need to call to process
  • call is a function prototype
  • thisArg is the object key value
  • arg1, arg2 … are input parameters separated by a sign,

Ví dụ :

Apply

Unlike call, apply allows you to pass an object and parameters through an array

Ví dụ :

Bind

Bind is similar to call, but this function cannot call the function directly, it will return us a new function.

Ví dụ :

You can see though, in the getUser () function, I did not define the name and phone variables, but when we console.log, the result was set ?. Apparently above I said when this stands in a function it will return a value as a [Window Object] , so what happens if I declare a name variable? This will point to the variable name which is the name of the object or the other?

There is a small note:

Methods like call() , and apply() can refer this to any object .

So we use call , apply , bind . This will point directly to that wrapped object ^^ Even if you define a variable with the same name, this will only point to that object 😉

Recently I introduced the usage as well as the difference between the three call, apply and bind functions.

When the wind is done, we switch to using this in the function callback, closure 😄 .

This is in the callback function

Before talking about this in the callback function, we will redefine what the callback function is 😄

In other words, the callback function is that we pass a function as a parameter to another function so we can activate that function later. Consider the following example:

Ví dụ :

Sử dụng this trong callback như thế nào?

Suppose you have an event function like this:

Pointers this is a reference to document.getElementById('btn') rather than objects Student , leading to the call this.name is meaningless.

For the above code to run as expected – print the Student’s name – then we must ensure the context of the callback function Student.getName is the Student object itself when this function is called. Specifically in this case we can use the Bind() function to attach context to that callback function.

This in closure

In a nutshell, closure is a inner function (inner function) inside another function (outer function). We already know that closure cannot access the outer function’s this pointer, so it might appear like this:

How to fix

Through a few shares above, hope everyone can better understand this pointer in JavaScript programming. We have in hand tools such as apply(), bind(), call() to control this pointer in many different situations.

Core rules to remember when working with pointers this is: always attached to the context of this pointer when the function is called, make sure we’re using the correct context of the function as desired.

Sincerely thank

Share the news now

Source : Viblo