在 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 页面上显示该值。