Detailed explanation of apply and call functions in JavaScript_jquery

The first time I translated a technical article, it was hilarious!

Original translation:

Function.apply and Function.call in JavaScript

The first paragraph is omitted.

Each JavaScript function will have many attached methods, including toString(), call() and apply(). It may sound strange to you that a function might have its own methods, but remember, every function in JavaScript is an object. Take a look at this article to review (refresher) JavaScript features. You may also want to know the difference between functions and methods in JavaScript. I think the descriptions of "function" and "method" are just JavaScript conventions. Functions stand on their own (for example: alert()), and methods are properties (dictionary) of an object inside the function. We call methods through the object. Each JavaScript object has a toString() method. The following is an example of code. In a function object, we can use the toString() method.

function foo(){
 alert('x');
}
alert(foo.toString());

Because functions are objects, they have their own properties and methods. We can think of them as data. In this article, we only focus on the two function methods apply() and call().

We start with the following code:

var x = 10;
function f(){
 alert(this.x);
}
f();

We define a global function f(). f() accesses the variable x through the this keyword, but it should be noted that we cannot call this function through an instance of an object. What object does this point to? this will point to this global object. Our variable x is defined in this global object. The above code can run normally, and the result will be a dialog box with 10 displayed in the dialog box.

We can call call() and apply() through this. As the following example shows how to use call():

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

Calling f() first will display the dialog box 10, because this points to the global object at this time. Then we call the call() method of the f function. The incoming parameter is o, and the running result shows the value of the x attribute in o, 15. The call() method will use its first parameter as the this pointer of the f function. In other words, we will tell the runtime which object this in the f function points to.

This jump sounds a bit funny, even a bit abnormal to C, Java and C# programmers. These are the fun parts of ECMAScript.

You can also pass parameters to the function through call():

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

apply() is similar to call(), except that apply() requires that the second parameter must be an array. This array will be passed as a parameter to the target function.

var x = 10;
var o = {x : 15};
function f(message) {
 alert(message);
 alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);

The apply() method is useful because we can create a function without caring about the parameters of the target method. This function can pass additional parameters to the method through the second array parameter of apply().

var o = {x : 15};
function f1(message1) {
 alert(message1 + this.x);
}
function f2(message1, message2) {
 alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
 func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);

There is something wrong with this syntax. In order to call the apply() method, we force the target function to use the parameters in the array. Fortunately, there is a way to make this syntax simpler. Before that, we must introduce one: parameter identifiers.

In JavaScript, each function actually has a variable-length parameter list. This means that even when a function has only one parameter, we can pass 5 parameters to it. The following code will have no errors and the result will be "H".

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

In f(), if we don’t want to accept other parameters, we can use the keyword arguments. arguments represents a parameter object, which has an attribute representing the length similar to an array.

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

You should know that, strictly speaking, arguments is not an array. arguments has a length attribute, but there are no split, push, or pop methods. In the previous g() function, we can copy the required parameters from arguments to form an array, and then pass this array to apply().

var o = {x : 15};
function f(message1, message2) {
 alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
 // arguments[0] = object
 // arguments[1] = func
 var args = [];
 for(var i = 2; i < arguments.length; i++) {
  args.push(arguments[i]);
 }
 func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');

When we call g(), we can pass additional arguments as parameters instead of stuffing the arguments into an array.