The difference between Function.prototype.apply and Function.prototype.call in JavaScript-JS Tutorial-php.cn

The difference between Function.prototype.apply and Function.prototype.call in JavaScript

WBOY

Release： 2023-08-24 13:05:02

forward

1518 people have browsed it

JavaScript 中 Function.prototype.apply 和 Function.prototype.call 的区别

Function.prototype.apply and Function.prototype.call are methods that allow you to call a function with a specific this value and parameters. The main difference between the two is that apply allows you to pass in an array of parameters, while call requires you to list the parameters one by one.

Function.prototype.apply

Function .prototype.apply is a method that allows you to call a function with a specific this value and argument array.

Syntax

The syntax for using apply is -

func.apply(thisArg, argsArray)

Copy after login

where thisArg is the value that will be used as this within the function. argsArray is the array of arguments that will be passed to the function.

Example

The following is an example of calling a function using apply -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function sayHello(name) {
         return "Hello, " + name + "!";
      }
      document.getElementById("result").innerHTML = sayHello.apply(null, ["John"])
   </script>
</body>
</html>

Copy after login

Output

The above code will print the following output.

Hello, John!

Copy after login

As you can see, we passed null for thisArg because we don't want to set this value. We passed an array for argsArray containing the parameter "John". The result is a call to the sayHello function with "John" as the name parameter.

Function.prototype.call

Function.prototype.call is a function that allows you to call a method with a specific this value and parameter list.

Syntax

The syntax for using call is

func.call(thisArg, arg1, arg2, ...)

Copy after login

where thisArg is the value that will be used as this within the function. arg1, arg2, ... are the parameters that will be passed to the function.

Example

Here is an example using call Calling function -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      function sayHello(name) {
         return "Hello, " + name + "!";
      }
      document.getElementById("result").innerHTML = sayHello.call(null, ["John"])
   </script>
</body>
</html>

Copy after login

Output

The above code will print the following output .

Hello, John!

Copy after login

As you can see, we passed null for thisArg because we don't want to set this value. We take "John" as the only parameter. The result is a call to the sayHello function with "John" as the name parameter.

Differences between Function.prototype.apply and Function.prototype.call

The following table highlights the main differences between Function.prototype.apply and Function.prototype.call-

##Conclusion

Basics	Function.prototype.apply	Function.prototype.call
Definition	This method allows us to call a function with a specific this value and argument array.	This method allows us to call a function with a specific this value and argument list.
Parameters	We pass an array of parameters.	We pass a parameter list.
Speed	Because it doesn't create a new function, it's faster than calling.	em>	Because each call creates a new function, it is slower than apply.
Usage	##Append array to Writing built-in functions without looping	Constructor of linked objects. Call anonymous functions. Call the function and specify the context of "this" Call the function without specifying the first argument.

In this tutorial, we discussed

apply

and The difference between call> method. The main difference between the two is how they accept arguments. These methods have different uses. You can view the usage rows in the table above.

The above is the detailed content of The difference between Function.prototype.apply and Function.prototype.call in JavaScript. For more information, please follow other related articles on the PHP Chinese website!