在 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 頁面上顯示該值。