What is the difference between call, apply and bind in JS?

Time:2020-9-7

introduce

In JS, the prototype of each function points to Function.prototype Object (JS is based on the inheritance of the prototype chain). Therefore, each function has apply, call, and bind methods, which inherit from the function.
They have the same function, they are used to change the direction of this in the function.

usage method

The usage of apply can be expressed as follows:
A.apply(B, [x, y, z]);
This method can change the this direction of function a to point to function B. The second parameter passes an array of function parameter lists.

The usage of call is similar to apply, except that the method of passing parameters is different. Something like this:
A.apply(B, x, y, z)
You can pass multiple parameters separately, instead of putting all the parameters into an array like apply.

The method of transferring parameters to bind is the same as call, except that it will be executed immediately after the call of apply and call methods, while a new function will be returned after the call of bind method. It will not be executed immediately and needs to be executed manually.

give an example

Var name = anonymous;
var age = 20;
//global.name
//global.age

var p1 = {
    Name: "Zhang San",
    age: 12,
    func: function(){
        console.log (` Name:${ this.name }, age:${ this.age >)
    }
}

var p2 = {
    Name: "Li Si",
    age: 15
}

P1. Func(); // Name: Zhang San, age: 12
P1. func.call (); // Name: unknown, age: 20
P1. func.apply (P2); // Name: Li Si, age: 15
P1. func.bind (P2); // Name: Li Si, age: 15
  1. When the P1. Func method is called directly, this refers to the current P1 object, so name and age are the property values of its own object.
  2. When the call method is used and the first parameter passed in is null, in the browser environment, this points to window; in the node environment, this points to global. Readers can change the name and age to global.name and global.age Check it out.
  3. When using the apply method, passing P2 in is equivalent to pointing the function’s this to the P2 object. Therefore, the properties printed out at this time are all attributes of the P2 object
  4. When using the bind method, a new function object is generated, so you need to execute the function manually (that is, add a bracket at the end of the function).

summary

After the example, the difference between call, apply and bind is already clear. They exist to change the context of this. So sometimes you see this usage. In order not to change the direction of this, bind (this) is usually added after the function, as follows

function f(){}.bind(this)

In this way, there will be no inexplicable this pointing problem. Obviously, when I want to call a property of the object to which this function belongs, why can’t I access it with this. (novice JS writers will definitely encounter this problem)

In fact, since ES6, arrow function has been supported. I suggest that you use arrow function to avoid this pointing problem.

In addition, using call, apply can also implement function inheritance. Before the class of ES6 appears, we need to use them to realize inheritance relationship.