Details of the apply and call functions in JavaScript

  • 2020-03-30 03:33:26
  • OfStack

The first translation of technical articles, see laugh!

Translation:

Function. Apply and Function. Call in JavaScript

The first paragraph is omitted.

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


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. For this article, we will focus only on the methods apply() and call() for two functions.

Let's 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 is important to note that we cannot call this function through an instance of an object. What object does this point to? This will point to the global object. Our variable x is defined in this global object. The code above works, and the result is a dialog box that displays 10.

We can call() and apply() with 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 10 dialog, because this is pointing to the global object. Then we call the call() method of the f function, passing in the parameter o, and running the result shows the value of the x attribute in o, 15. The call() method USES its first argument as the this pointer to the f function. In other words, we're going to tell the runtime which object this in f is pointing to.

This jump sounds a little funny, even for C++, Java, and C# programmers. These are the interesting parts of ECMAScript.

Call () can also pass arguments to functions:


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

Apply () is similar to call() except apply() requires that the second parameter be an array. This array is passed as an argument 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 worrying about the parameters of the target method. This function can pass additional arguments to the method via the second array argument 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's something wrong with the syntax. To call the apply() method, we force the target function to use the arguments in the array. Fortunately, there is a way to make this syntax easier. Before we do this, we must first introduce one: the parameter identifier.

In JavaScript, each function actually has a list of arguments of variable length. This means that even if a function has only one argument, we can pass five arguments to it. There are no errors in the following code, and the result is "H".


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

In f(), if we don't want to accept other arguments, we can use the keyword arguments. Arguments represents a parameter object that has a property for length similar to an array.


function f(message) {
 //The value of message is the same as arguments[0]
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
//The result is "Hello"
f('H', 'e', 'l', 'l', 'o');

You should know that arguments is not strictly an array. Arguments has a length property, but no split, push, or pop methods. In the previous g() function, we could copy the required arguments from arguments to form an array, and then pass the 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 throwing the arguments into an array.


Related articles: