Javascript 简明教程

JavaScript - Function apply() Method

Function apply() Method

JavaScript 中的 Function apply() 方法允许我们调用函数，该函数给定一个特定的值来表示 this 和作为数组提供的参数。

The Function apply() method in JavaScript allows us to invoke a function given a specific value for this and arguments provided as an array.

Function call() 和 apply() 方法非常相似，但它们之间的主要区别在于，function apply() 方法采用一个包含所有函数参数的单个数组，而 function call() 方法采用单个参数。

The Function call() and apply() methods are very similar, but the main difference between them is function apply() method takes a single array containing all function arguments, and the function call() method takes individual arguments.

与 Function call() 方法相同，我们可以使用 apply() 方法来更改 this 值，并且可以为 this 分配一个任意的对象。

Same as the Function call() method, we can use the apply() method to manipulate the this value and can assign an orbitrary object to this.

Syntax

JavaScriot 中 Function apply() 方法的语法如下所示 −

The syntax of the Function apply() method in JavaScriot is as follows −

func.apply(thisArg, [arg1, arg2, ... argN]);

Parameters

  1. thisArg − The 'thisArg' grument represents the function context. It is an object whose properties are needed to access the reference function using the 'this' keyword.

  2. [arg1, arg2, …​ argN] − They are arguments to pass to the function.

Return value

它返回函数返回的返回结果。

It returns the resultant value returned from the function.

Examples

让我们通过一些示例了解 JavaScript Function apply() 方法。

Let’s understand JavaScript Function apply() method with the help of some examples.

Using apply() method without passing argument

在以下代码中，我们定义了在输出中打印消息的 test() 函数。

In the below code, we have defined the test() function printing the message in the output.

我们以标准方式调用函数，并使用 apply() 方法在不传递任何参数的情况下调用函数。输出表明 apply() 方法给出的输出与普通函数调用相同。

We invoked the function in a standard way and used the apply() method without passing any argument to invoke the function. The output shows that the apply() method gives the same output as a normal function call.

<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
  <p id = "output1"> </p>
  <p id = "output2"> </p>
  <script>
    function test() {
      return "The function test is invoked!";
    }
    document.getElementById("output1").innerHTML = test();
    document.getElementById("output2").innerHTML = test.apply();
  </script>
</body>
</html>
The function test is invoked!
The function test is invoked!

Using apply() method with this argument only

在以下代码中，'car' 对象包含三个不同的属性。我们将 car 对象作为 apply() 方法的 'thisArg' 参数传递。

In the below code, the 'car' object contains three different properties. We passed the car object as a 'thisArg' argument of the apply() method.

在 showCar() 函数中，我们使用 'this' 关键字访问 car 对象的属性并将其打印到输出中。

In the showCar() function, we access the properties of the car object using the 'this' keyword and print it into the output.

<html>
<head>
  <title> JavaScript - Function apply() method </title>
</head>
<body>
  <p id = "output"> </p>
  <script>
    function showCar() {
      return "The price of the " + this.name + " " +
        this.model + " is: " + this.price;
    }
    let car = {
      name: "OD",
      model: "Q6",
      price: 10000000,
    }
    document.getElementById("output").innerHTML = showCar.apply(car);
  </script>
</body>
</html>
The price of the OD Q6 is: 10000000

Using apply() method with an array of function arguments

在下例中，我们将 nums 对象作为 apply() 方法的第一个参数传递。然后，我们将参数数组作为 apply() 方法的参数传递。

In the example below, we pass the nums object as the first argument of the apply() method. After that, we pass the array of arguments as an apply() method’s argument.

在 printSum() 函数中，我们使用 'this' 关键字访问对象属性，并使用函数参数访问函数参数。

In the printSum() function, we access the object properties using the 'this' keyword and function arguments using the function parameters.

<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
<p id = "output"> </p>
<script>

    function printSum(p1, p2) {
      return this.num1 + this.num2 + p1 + p2;
    }

    const nums = {
      num1: 5,
      num2: 10,
    }

    const ans = printSum.apply(nums, [40, 32]);
    document.getElementById("output").innerHTML = "Total sum is " + ans;
</script>
</body>
</html>
Total sum is 87

Using apply() method with built-in functions

您还可以将 apply() 方法与内置对象方法一起使用。我们可以使用 apply() 方法调用内置对象方法（例如 Math.max 或 Math.min）。

You can also use the apply() method with built-in object methods. We can invoke the built-in object methods (such as Math.max or Math.min) using apply() method.

在下例中，我们对内置 JavaScript 函数 Math.max 和 Math.min 使用 apply() 方法。我们不能直接对数组使用这些方法。我们使用 apply() 方法调用 Math.max 和 Math.min 方法。我们将 null 作为 thisArg 传递，并将五个整数的数组作为函数参数传递。

In the example below, we use apply() method with built-in JavaScript functions - Math.max and Math.min. We can’t directly use these methods for the arrays. We invoke the Math.max and Math.min methods using apply() method. We pass null as thisArg and the array of five integers as the function argument.

<html>
<head>
    <title> JavaScript - Function apply() method </title>
</head>
<body>
<p id = "output-max"> Max element in the array: </p>
<p id = "output-min"> Max element in the array:</p>
<script>

  const numbers = [7, 6, 4, 3, 9];

  document.getElementById("output-max").innerHTML += Math.max.apply(null, numbers);

  document.getElementById("output-min").innerHTML += Math.min.apply(null, numbers);

</script>
</body>
</html>
Max element in the array: 9
Max element in the array:3

请注意，如果您直接对数组使用 Math.max() 或 Math.min() 方法来查找数组中的最大或最小元素，结果将为 NaN。

Notice if you use Math.max() or Math.min() methods directly for arrays to find max or min element in the array, the result will be NaN.