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