In-depth analysis of apply, call, and bind in JS_javascript skills

In Javascript, Function is an object. The this pointer in the Function object depends on how the function is called. Using apply, call and bind can all change the pointer of this in the function object. Before talking about the differences, let’s summarize the similarities between the three:
1. They are all used to change the point of the this object of the function.
2. The first parameter is the object to which this points.
3. You can use subsequent parameters to pass parameters.

call method:

Syntax: call([thisObj[,arg1[, arg2[, [,.argN]]]]])
Definition: Call a method of an object to replace the current object with another object.
Description: The call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj.
If the thisObj parameter is not provided, the Global object is used as thisObj.

apply:

Syntax: apply(thisObj, array parameter)
Definition: Apply a method of an object and replace the current object with another object
Note: If the parameter is not of array type, a TypeError will be reported.

bind:

A method called bind has been extended in EcmaScript5 (not supported by IE6, 7, and 8). bind is very similar to call, for example, the acceptable parameters are divided into two parts, and the first parameter is used as an execution The object of this in the function context. There are two differences:
①The return value of bind is a function; ②The use of subsequent parameters is also different;

Look at example 1 first:

function add(a, b) {
  alert(a + b);
}
function sub(a, b) {
  alert(a - b);
}

For call, you can use it like this:
add.call(sub,3,1);The result is 4

For apply, you can use it like this;
add.apply(sub,[3,1]);The result is 4

For bind, you can use it like this:
add.bind(sub)(3,1); the result is 4

You can see that the output results are the same, but the usage of passing parameters is different;

Look at Example 2:

function jone(name,age,work){
  this.name=name;
  this.age=age;
  this.work=work;
  this.say=function(msg){
    alert(msg+"，我叫"+this.name+"，我今年"+this.age+"岁，我是"+this.work)
  }
}
var jack={
  name:"jack",
  age:'24',
  work:"学生"
}
var pet=new jone();

pet.say.apply(jack,["欢迎您"])
console.log(this.name)

For call, you need this:
pet.say.call(jack,"Welcome!")

For apply, you need this:
pet.say.apply(jack,["Welcome!"])

For bind, you need this:
pet.say.bind(jack,"Welcome")()

At this time, console.log(this.name) is output, and it is found that this.name is jack, and the context of this has changed;

The above in-depth analysis of apply, call, and bind in JS is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home.