在 JavaScript 中 apply 与 call 方法

Muhammad Muzammil Hussain 2023年1月30日 2022年5月1日
  1. JavaScript 中的 call() 方法
  2. JavaScript 中的 apply() 方法
  3. JavaScript 中的 call() 方法示例
  4. 使用 apply() 方法的替代方法
在 JavaScript 中 apply 与 call 方法

本文解释了如何在 JavaScript 中使用 call()apply() 方法。使用一些简单的示例解释了这两个函数之间的区别。

让我们看看以下方法及其工作原理。

JavaScript 中的 call() 方法

将所有者对象作为参数是 call() 方法。关键字 this 指的是函数的所有者或它所属的对象。

我们也可以调用一个方法来在不同的对象上使用它。它将让我们使用逗号分隔的参数调用方法。

JavaScript 中 call() 方法的语法

abc_object.object_method.call( object_instance, arguments,...)

如上所述,call() 方法接受两个参数,我们将在下面描述。

  • 在第一个参数中,object_instance 将持有一个对象的实例。
  • 第二个参数中是逗号分隔的参数。

JavaScript 中的 apply() 方法

apply() 用于在不同的对象上写入。它采用数组形式的值。

JavaScript 中 apply() 方法的语法

abc_object.object_method.apply( object_instance, [arguments_array...])

apply() 方法接受两个参数,如上所示。

  • 在第一个参数中,object_instance 将保存对象的实例。
  • 在第二个参数中,参数是数组的形式。

JavaScript 中的 call() 方法示例

我们将制作一个简单的按钮,点击显示,它将触发点击事件的功能。

该函数将使用 call() 方法,我们将使用包含多个字符串值作为键值对的对象显示组合文本结果。它将通过使用 call() 方法传递参数来简单地组合给定对象的字符串。

结果将显示为一个段落。

<!DOCTYPE html>  
<html>
    <head>
        <title>
call() method Example
</title>
    </head>
    <body style = "text-align:center;">
        <h1 >  
            Click on "Click to display" for display combined Text using call()
        </h1>
        <button onClick="fun()">
          Click to display
        </button>  
        <p id="mypara"></p>  
        <!-- Script tags to use call() method to call
            function -->
        <script>
            function fun() {
              let object_b = {
                combinedText: function(text1, text2) {
                  return this.firstName + " " + this.lastName 
                        + " " + text1 + " " + text2;
                }
              }   
              let object_a = {
                firstName:"DelftStack",
                lastName: "Technology",
              }
              let x = object_b.combinedText.call(object_a, "is", "Best"); 
              document.getElementById("mypara").innerHTML = x;
              }
        </script> 
    </body>
</html>

在上面的 HTML 页面源代码中,你可以看到一个简单的按钮 Click to display,它调用函数 fun()

fun() 主体中使用 object_b 中的另一个 combinedText 方法进行初始化。它返回一个连接的传递参数字符串。

另一个初始化对象 object_a,它包含多个字符串作为键值,使用 call() 参数 (object_a,"is","best")。两者都在字符串中连接并返回结果。

结果由 getElementById() 显示。

使用 apply() 方法的替代方法

apply() 方法可以获得相同的结果。你可以通过传递参数数组而不是逗号分隔的参数 object_b.combinedText.apply(object_a, ["is", "Best"]) 来使用 apply() 方法。

<script>
    function fun() {
        let p = {
        combinedText: function(text1, text2) {
            return this.firstName + " " + this.lastName 
                    + ", " + text1 + ", " + text2;
        }
    }
    let object_a = {
        firstName:"DelftStack",
        lastName: "Technology",
    }
        let x = p.combinedText.apply(object_a, ["Is", "Best"]); 
        document.getElementById("mypara").innerHTML = x;
    }
</script> 

在上面的示例中,x = object_b.combinedText.apply() 方法与参数 (object_a,[array_arguments]) 一起使用。

在下一步中,我们需要在段落 id mypara 中附加结果变量以在 HTML 页面上显示该值。

相关文章 - JavaScript Method