透過簡單範例了解 JavaScript 中的呼叫、應用和綁定

使用 JavaScript 時，您可能會遇到三種強大的方法：呼叫、應用和綁定。這些方法用於控制函數中 this 的值，從而更輕鬆地處理物件。讓我們透過簡單的範例來分解每種方法，以了解它們的工作原理。

1. 呼叫方法

call方法允許你呼叫具有特定this值的函數並一一傳遞參數。

const person = {
  name: 'Alice',
  greet: function(greeting) {
    console.log(`${greeting}, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Bob' };

person.greet.call(anotherPerson, 'Hello');
// Output: "Hello, my name is Bob"

在此範例中，呼叫將 this 值從 person 變更為 anotherPerson，因此greet 函數列印「Hello, my name is Bob」。

2. 應用方法

apply 方法與 call 類似，但它將參數作為陣列而不是一個一個地接收。

const person = {
  name: 'Alice',
  greet: function(greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`);
  }
};

const anotherPerson = { name: 'Charlie' };

person.greet.apply(anotherPerson, ['Hi', '!']);
// Output: "Hi, my name is Charlie!"

這裡，apply 還將 this 值更改為 anotherPerson 並允許您將多個參數作為數組傳遞。

3. 綁定方法

bind方法不會立即呼叫該函數。相反，它會傳回一個帶有綁定 this 值的新函數，您可以稍後調用該函數。

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hi, my name is ${this.name}`);
  }
};

const anotherPerson = { name: 'Diana' };

const greetDiana = person.greet.bind(anotherPerson);

greetDiana();
// Output: "Hi, my name is Diana"

在此範例中，bind 建立了一個新函數greetDiana，並將其綁定到anotherPerson。當您呼叫greetDiana 時，它會列印“嗨，我的名字是Diana”。

概括

• call：立即呼叫具有特定 this 值和一一傳遞的參數的函數。
• apply：立即使用特定的 this 值和作為陣列傳遞的參數呼叫函數。
• bind：傳回一個具有特定 this 值的新函數，稍後可以呼叫該函數。

當您需要從一個物件借用方法以與另一個物件一起使用時，或者當您想要對函數中的 this 值進行更多控制時，這些方法非常方便。