Home > Article > Web Front-end > The difference between Function.prototype.apply and Function.prototype.call in JavaScript

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

WBOYforward: 2023-08-24 13:05:021491browse

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)

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>

Output

The above code will print the following output.

Hello, John!

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, ...)

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>

Output

The above code will print the following output .

Hello, John!

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!

JavaScript NULL 构造函数循环参数数组 function 对象 this prototype td

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to make a polygon object react to resize events using FabricJS?Next article：How to make a polygon object react to resize events using FabricJS?

See more

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

Function.prototype.apply

Syntax

Example

Output

Function.prototype.call

Syntax

Example

Output

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

In this tutorial, we discussed

Related articles