Usage and difference of call and apply in JavaScript

This article describes the usage and differences between call and apply in JavaScript. It has good reference value. Let's take a look at it below. apply accepts two parameters. The first parameter specifies the point of this object in the function body, and the second parameter is a set with a lower mark, this set can be an array or an array of classes. The apply method passes the elements in this set as parameters to the called function:

Var func = function (a, B, c) {alert ([a, B, c]); // output [1, 2, 3]}; func. apply (null, [1, 2, 3]);

In this Code, parameters 1, 2, and 3 are put in an array and passed into the func function. They correspond to a, B, and c in the func parameter list respectively.

The number of parameters passed in by call is not fixed. The same as apply, the first parameter also indicates the this point in the function body. From the second parameter, each parameter is input to the function in sequence:

Var func = function (a, B, c) {alert ([a, B, c]); // output [1, 2, 3]}; func. call (null, 1, 2, 3 );

When a function is called, The JavaScript interpreter does not calculate the difference between the number, type, and sequence of the actual parameters and the actual parameters. The JavaScript parameters are represented by an array internally. In this sense, the application usage is higher than the call usage. We don't have to worry about how many parameters are passed into the function, as long as we use the apply method to push it over. Call is a syntactic sugar wrapped in apply. If we know exactly how many parameters the function accepts and want to clearly express the correspondence between the form parameters and the real parameters, you can also use call to transmit parameters.

Usage of call and apply

1. Change this point

The most common use of call and apply is to change this point in the function. Let's look at an example:

Var obj1 = {name: 'sven'}; var obj2 = {name: 'Anne '}; window. name = 'window'; var getName = function () {alert (this. name) ;}; getName (); // output: windowgetName. call (obj1); // output: svengetName. call (obj2); // output: anne

When the code getName. call (obj1) is executed, this in the getName function points to the obj1 object.

var getName = function(){alert ( this.name );};

Actually equivalent:

Var getName = function () {alert (obj1.name); // output: sven };

In actual development, this is often used to point to a scene that has been inadvertently changed. For example, if there is a p node, The onclick event of the p node originally points to this p:

Document. getElementById ('p1'). onclick = function () {alert (this. id); // output: p1 };

If there is an internal function func In the event function, when calling the func function inside the event, this in the func function points to the window, rather than the expected p, as shown in the following code:

Document. getElementById ('p1 '). onclick = function () {alert (this. id); // output: p1 var func = function () {alert (this. id); // output: undefined} func ();};

At this time, we use call to modify this in the func function so that it still points to p:

Document. getElementById ('p1 '). onclick = function () {var func = function () {alert (this. id); // output: p1} func. call (this );};

2. Function. prototype. bind

Most advanced browsers implement built-in functions. prototype. bind, used to specify the point of this inside the Function, even if there is no native Function. prototype. it is not difficult to simulate a bind implementation. The Code is as follows:

Function. prototype. bind = function (context) {var self = this; // Save the original function return function () {// return a new function return self. apply (context, arguments); // when executing a new function, the previously passed context // will be treated as this} in the new function; var obj = {name: 'sven'}; var func = function () {alert (this. name); // output: sven }. bind (obj); func ();

We use Function. prototype. bind to "Wrap" the func Function and input an object context as a parameter. this context object is the this object we want to modify.

In the internal implementation of Function. prototype. bind, we first save the reference of the func Function and then return a new Function. When we execute the func function in the future, the new function is actually executed first. In the new function, the code self. apply (context, arguments) executes the original func function and specifies the context object as this in the func function.

This is a simplified Function. prototype. bind implementation. We usually make it a little more complicated,

This allows you to prefill in some parameters in the func function:

Function. prototype. bind = function () {var self = this, // Save the original function context = []. shift. call (arguments), // this context args to be bound = []. slice. call (arguments); // convert the remaining parameters to the array return function () {// return a new function return self. apply (context, []. concat. call (args, []. slice. call (arguments); // when executing a new function, the previously passed-in context is treated as this // In the new function body and the parameters passed in are combined twice, as the parameter of the new function }}; var obj = {name: 'sven'}; var func = function (a, B, c, d) {alert (this. name); // output: sven alert ([a, B, c, d]) // output: [1, 2, 3, 4]}. bind (obj, 1, 2); func (3, 4 );

The above is all the content of this article. I hope this article will help you in your study or work, and I also hope to support PHP!

For more information about the usage and differences between call and apply in JavaScript, see PHP!