跳至主要内容

請說明 JavaScript 中.call 和 .apply 的差異為何?

.call.apply 都可以直接呼叫函式並且改變函式內 this 的指向,兩者最主要的差異是傳入的參數形式不同。

.call

  • 定義:.call 方法會立即執行函式,並將 this 指向傳入的第一個參數,接下來的參數是要傳給函式的具體值,一個一個地傳入。
  • 參數形式:.call是 逐個傳入參數的。
  • fn.call(thisArg, arg1, arg2, ...)
  • 使用時機:所有參數的數量,並且想逐個傳遞。
function order(food, count) {
console.log(this.name, "點了", food, count);
//Ashley 點了 豚骨拉麵 一份
}
const person = {
name: "Ashley",
};
order.call(person, "豚骨拉麵", "一份");

在這個例子中,this 被設定為 person,並且 food 和 count 是逐個傳入的。

.apply

  • 定義:.apply.call 類似,也會立即執行函式,並將 this 指向傳入的第一個參數。但是,接下來的參數必須以陣列的形式傳遞。
  • 參數形式:.apply 是用 陣列 傳遞參數的。
  • fn.apply(thisArg, [arg1, arg2, ...])
  • 使用時機:參數是以陣列的形式存在,或者數量不確定時。
function order(food, count) {
console.log(this.name, "點了", food, count);
//Andy 點了 沾麵 兩份
}
const person = {
name: "Andy",
};
order.apply(person, ["沾麵", "兩份"]);

在這個例子中,this 被設定為 person,而參數 food 和 count 是以陣列的形式傳遞。