笙亿网络策划

JavaScript Function apply() 方法怎么用？

约 8 分钟读完 26 阅
文章导读
上一个 测验 下一个 Function apply() 方法 JavaScript 中的 Function apply() 方法允许我们调用一个函数，并为 this 指定特定值，同时将参数以数组形式提供。
📋 目录
  1. Ⅰ Function apply() 方法
  2. Ⅱ 语法
  3. Ⅲ 示例
A A

JavaScript - Function apply() 方法

上一个
测验
下一个

Function apply() 方法

JavaScript 中的 Function apply() 方法允许我们调用一个函数，并为 this 指定特定值，同时将参数以数组形式提供。

Function call() 和 apply() 方法非常相似，但它们的主要区别在于：apply() 方法接受一个包含所有函数参数的单一数组，而 call() 方法则接受单独的参数。

与 Function call() 方法相同，我们可以使用 apply() 方法来操纵 this 值，并将任意对象赋值给 this。

语法

JavaScript 中 Function apply() 方法的语法如下 − 

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

参数

  • thisArg − 'thisArg' 参数表示函数上下文。它是一个对象，其属性可以通过 'this' 关键字在引用函数中访问。

  • [arg1, arg2, ... argN] − 这些是要传递给函数的参数。

返回值

它返回函数执行后产生的返回值。

示例

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

不传递参数使用 apply() 方法

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

我们以标准方式调用了该 function，并使用 apply() 方法不传递任何参数来调用 function。输出显示 apply() 方法与普通 function 调用产生相同的输出。

<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!

仅传递 this 参数使用 apply() 方法

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

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

<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

使用 function 参数数组调用 apply() 方法

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

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

<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

与内置 function 一起使用 apply() 方法

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

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

<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。