JavaScript-this呼叫的三種方法: call、apply、bind

引言

在 JavaScript 中，this 是一個特殊的Keyword，代表了現在執行代碼的目標。然而我們需要在不同的上下文中調用函式，這時就會用到 call、apply 和 bind 這三種方法。

之前有寫過一篇Function函式宣告，有介紹到Arrow Funciton與This的關係>>

JS-函式宣告Function Declared、函式表達Function Express、This – Hugo Habor

This

在物件方法中，要存取物件本身，我們利用關鍵字 this。

this 的值就是方法的呼叫者，也就是呼叫方法的物件。

參考連接

https://hsuchihting.github.io/javascript/20200804/4095833756/

https://www.shubo.io/javascript-this/

1. call 方法

call 方法用於調用一個函數，並指定函數內的 this 值，以及將函數的參數以參數列表的形式傳遞進去。

// 定義一個物件
const person = {
  name: "JzenLiao",
  greet: function (greeting) {
    console.log(`${greeting}, ${this.name}!`);
  },
};

// 定義另一個物件
const anotherPerson = {
  name: "Alice",
};

// 使用 call 方法將 greet 函數應用到 anotherPerson 物件上
person.greet.call(anotherPerson, "Hello");
// 輸出: Hello, Alice!

在上面的例子中，call 方法將 person 物件中的 greet 函數用到了 anotherPerson 物件上，同時指定了 this 的值為 anotherPerson。

2. apply 方法

apply 方法與 call 類似，區別在於參數的傳遞方式。apply 接受一個包含參數的數組。

// 定義一個物件
const person = {
  name: "JzenLiao",
  greet: function (greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
  },
};

// 定義另一個物件
const anotherPerson = {
  name: "Alice",
};

// 使用 apply 方法將 greet 函數應用到 anotherPerson 物件上，並傳遞參數的數組
person.greet.apply(anotherPerson, ["Hello", "!"]);
// 輸出: Hello, Alice!

在這個例子中，apply 方法將 greet 函數應用到了 anotherPerson 物件上，同時使用了包含兩個元素的數組作為參數。

3. bind 方法

bind 方法返回一個新函數，並將指定的 this 值綁定到該函數。這個新函數可以稍後被調用。

// 定義一個物件
const person = {
  name: "JzenLiao",
  greet: function (greeting) {
    console.log(`${greeting}, ${this.name}!`);
  },
};

// 定義另一個物件
const anotherPerson = {
  name: "Alice",
};

// 使用 bind 方法綁定 greet 函數到 anotherPerson 物件上
const boundGreet = person.greet.bind(anotherPerson);

// 調用新函數
boundGreet("Hola");
// 輸出: Hola, Alice!

在這個例子中，bind 方法創建了一個新的函數 boundGreet，這個函數的 this 值已經被綁定到了 anotherPerson 物件上。

結論

總結，call、apply 和 bind 是 JavaScript 中用於控制函數中 this 值的三種方法。它們在不同的情境中有不同的應用，初學者可以通過這些例子更好地理解它們的使用方式。熟練掌握這些方法將有助於開發者更靈活地處理函數調用的上下文。