Preface:

The this pointing problem is a perennial problem in JavaScript. In Javascript, the direction of this is usually determined when a function is called. In simple terms, this refers to who called the function. Of course, this is only narrow, and you can read the book Javascript you Don’t know.

The call() and apply() methods can simply be reduced to changing the this pointer so that our this pointer no longer refers to whoever called the function.

1. Introduction to Call () and apply()

In JavaScript, every Function object comes with call() and apply() methods, that is, function.prototype.call () and function.prototype.apply (), both of which are mounted on the prototype.

MDN’s official explanation is as follows:

The call:

The **call()** method calls a function with a specified this value and one or more arguments given separately.

apply:

The **apply()** method calls a function with a given this value and arguments supplied in the form of an array (or array-like object).

As explained on the official website, you may have a general understanding of these two methods. In short, the main function of call and apply is to change the direction of this.

2. How to use call() and apply()

The call:

function.call(thisArg, arg1, arg2, …)

Apply:

func.apply(thisArg, [argsArray])

Parameter Description:

ThisArg: This value of the function at run time. If the function is in non-strict mode and specified as null or undefined, it is automatically replaced with pointing to a global object.

arg1, arg2, … And _[argsArray_] : a list of arguments received by the function.

3. This points to a simple example

Code examples:

<script> let obj1 = {name: "zhang SAN ", age: 24, user: function (args) {console.log(" name: ", this.name); Console. log(" age: ", this.age); Console. log(" parameters ", args); }} let obj2 = {name: "", age: 30, user: function () {console.log(" ", this.name); Console. log(" age: ", this.age); Console. log(" parameters ", args); }} // Call obj1.user normally (' I am an argument '); Obj2.user (' I am a parameter '); </script>Copy the code

Output result:

The output

Obj1 and obj2 are two objects declared in the previous code, including some general properties and a method property. We then end up calling two methods in the object, with this pointing to our caller, not surprisingly, and name and age being the values declared in the current object.

4. Use the call() and apply() methods to change the this reference

Code examples:

<script> let obj1 = {name: "zhang SAN ", age: 24, user: function (args) {console.log(" name: ", this.name); Console. log(" age: ", this.age); Console. log(" parameters ", args); }} let obj2 = {name: "", age: 30, user: function (args) {console.log(" ", this.name); Console. log(" age: ", this.age); Console. log(" parameters ", args); }} // Normal call // obj1.user(' I am an argument '); // obj2.user(' I am an argument '); // Change this to obj1.user.call(obj2, "I am an argument "); // Change obj2.user.apply(obj1, [" I am a parameter "]) with call; // Change </script> with applyCopy the code

Output result:

The output

As you can see from the output above, the result is exactly the opposite of the normal result of this pointing, because we have changed this pointing to obj2 using the call and apply methods. That is, when we call obj1.user, we have changed this pointing to obj2, so we have allowed the property values in obj2.

5. The difference between call and apply

There is a paragraph on MDN that draws the reader’s attention:

Note: The call() method works like apply() except that call() takes a list of parameters, while apply() takes an array of parameters.

There is no difference between the two methods. The only difference is the parameters received, a list of parameters received, and an array of parameters received, as can be seen in the code example above.

Conclusion:

The call() and apply() methods are similar, but slightly different, and may not be used in many scenarios, such as math.max.apply (null, array).