在 JavaScript 中，apply、bind 和 call 是三個重要的函數，它們都是 Function.prototype 的方法。這些函數可以讓我們動態地改變函數的 this 值，或者傳遞引數來執行函數。本篇部落格將詳細介紹 apply、bind 和 call 的使用方法以及它們之間的區別。
apply() 方法是 Function.prototype 上的一個方法，可以用於改變函數的 this 值。它接受兩個引數：第一個引數是要繫結的 this 值，第二個引數是一個陣列，其中包含要傳遞給函數的引數。apply() 方法會立即執行函數。
function addNumbers(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
const result = addNumbers.apply(null, numbers);
console.log(result); // 輸出 6
在上面的例子中，我們定義了一個 addNumbers() 函數，它接受三個引數並返回它們的和。然後，我們定義了一個陣列 numbers，其中包含要傳遞給 addNumbers() 函數的引數。我們使用 apply() 方法將陣列作為引數傳遞給函數，並將 this 值設定為 null。最後，我們列印出 addNumbers() 函數的返回值。
call() 方法和 apply() 方法非常相似，但是它的引數不是陣列，而是一個一個傳遞的。call() 方法也可以用於改變函數的 this 值。
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet.call(null, 'Alice'); // 輸出 "Hello, Alice!"
在上面的例子中，我們定義了一個 greet() 函數，它接受一個引數 name，並在控制檯中輸出一條歡迎資訊。我們使用 call() 方法將 this 值設定為 null，並將要傳遞給函數的引數一個一個地傳遞。
bind() 方法和 apply() 方法和 call() 方法有些不同。它不會立即執行函數，而是返回一個新的函數，這個函數的 this 值已經被改變了。我們可以在之後的任何時候呼叫這個函數。並且傳遞的部分引數也可在後面使用。
const person = {
name: 'Alice',
greet: function() {
console.log(`Hello, my name is ${this.name}!`);
}
};
const greetAlice = person.greet.bind(person);
greetAlice(); // 輸出 "Hello, my name is Alice!"
在上面的例子中，我們定義了一個 person 物件，其中包含一個 greet() 方法。然後，我們使用 bind() 方法建立一個新的函數 greetAlice，並將 person 物件作為 this 值繫結。最後，我們呼叫 greetAlice() 函數，它會輸出 "Hello, my name is Alice!"。
apply()、call() 和 bind()三個方法之間的最大區別在於它們傳遞引數的方式以及它們是否是立即執行函數：
在使用這些方法時，我們需要理解它們之間的區別，並根據具體情況進行選擇。如果我們想要立即執行一個函數並傳遞一個陣列作為引數，那麼應該使用 apply() 方法。如果我們想要立即執行一個函數並逐個傳遞引數，那麼應該使用 call() 方法。如果我們想要建立一個新的函數並繫結 this 值，那麼應該使用 bind() 方法。
此外，在使用 apply()、call() 和 bind() 方法時，我們需要注意傳遞的 this 值和引數是否正確。如果我們不傳遞 this 值或傳遞一個錯誤的 this 值，那麼函數可能無法正確地執行。同樣，如果我們沒有正確地傳遞引數，那麼函數的結果也可能會出現錯誤。
瞭解這些方法的內部機制可以幫助我們更好地理解它們的使用方式。在 JavaScript 中，函數是物件，因此每個函數都有一個 prototype 物件。當我們建立一個函數時，它會自動建立一個 prototype 物件，並將該物件的 constructor 屬性設定為函數本身。
apply()、call() 和 bind() 方法都是在 Function.prototype 上定義的(每個函數都是 Function 物件的範例)，因此每個函數都可以使用它們。當我們呼叫 apply() 或 call() 方法時，JavaScript 引擎會將 this 值設定為傳遞給方法的第一個引數，並將要傳遞給函數的引數作為陣列或單個引數傳遞。當我們呼叫 bind() 方法時，它會返回一個新的函數，並將 this 值設定為繫結的值。
下面是 apply() 方法的一個簡單實現：
Function.prototype.myApply = function(thisArg, args) {
// 首先判斷呼叫 myApply() 方法的物件是否為函數
if (typeof this !== 'function') {
throw new TypeError('Function.prototype.myApply called on non-function');
}
// 如果 thisArg 為 null 或 undefined，則將其設定為全域性物件
if (thisArg === null || thisArg === undefined) {
thisArg = window;
}
// 將函數設定為 thisArg 的方法，以便在 thisArg 上呼叫它
thisArg.__myApply__ = this;
// 執行函數並獲取結果
const result = thisArg.__myApply__(...args);
// 刪除在 thisArg 上設定的方法
delete thisArg.__myApply__;
// 返回函數的執行結果
return result;
};
call() 方法的實現機制與 apply() 方法類似，只是在呼叫函數時將引數傳遞給函數的方式有所不同。call() 方法的實現如下：
Function.prototype.myCall = function(thisArg, ...args) {
// ... 如上 只是引數需要用...rest 展開
};
bind() 方法的實現機制稍微有些不同。bind() 方法會建立一個新的函數，並將原函數的 this 值繫結到指定的物件上。當新函數被呼叫時，它會將繫結的 this 值傳遞給原函數，並將任何附加的引數一併傳遞。bind() 方法的實現如下：
Function.prototype.myBind = function(thisArg, ...args) {
// 首先判斷呼叫 myBind() 方法的物件是否為函數
if (typeof this !== 'function') {
throw new TypeError('Function.prototype.myBind called on non-function');
}
// 儲存原函數的參照
const originalFunc = this;
// 返回一個新函數
return function boundFunc(...newArgs) {
// 將 this 值設定為 thisArg，並呼叫原函數
return originalFunc.apply(thisArg, [...args, ...newArgs]);
};
};
這裡，我們通過使用剩餘引數和展開語法來處理任意數量的傳遞引數，同時使用 apply() 方法將繫結的 this 值和所有引數傳遞給原函數。
需要注意的是，這裡的 bind() 方法是定義在 Function 的原型上的。這意味著，所有的函數都可以呼叫這個方法，並將其繫結到需要的物件上。
值得一提的是，bind() 方法在繫結 this 值的同時，還可以通過將附加引數傳遞給新函數來「柯里化」函數。也就是說，通過預先繫結部分引數，我們可以建立一個新函數，這個函數接受剩餘的引數，並在呼叫原函數時將這些引數一併傳遞。這個技巧在實際開發中經常用到，可以幫助我們簡化程式碼，並提高程式碼的可讀性。
以上是 apply()、call() 和 bind() 方法的手動實現方式，當然，JavaScript 中的這些方法已經預先實現好了，我們只需要使用即可
在 JavaScript 中，函數的 this 值預設指向全域性物件（在瀏覽器中通常為 window 物件）。如果我們想要在函數內部使用不同的 this 值，那麼可以使用 apply()、call() 或 bind() 方法來改變它。例如：
const obj = { name: 'Alice' };
function greet() {
console.log(`Hello, ${this.name}!`);
}
greet.apply(obj); // "Hello, Alice!"
greet.call(obj); // "Hello, Alice!"
const newGreet = greet.bind(obj);
newGreet(); // "Hello, Alice!"
在上面的程式碼中，我們使用 apply()、call() 和 bind() 方法來將函數的 this 值設定為 obj 物件，並在函數內部使用它。
有時候我們無法確定函數的引數個數，或者我們想要將一個陣列作為引數傳遞給函數。在這種情況下，我們可以使用 apply() 方法來將陣列作為引數傳遞給函數。例如：
function sum(a, b, c) {
return a + b + c;
}
const nums = [1, 2, 3];
const result = sum.apply(null, nums);
console.log(result); // 6
在上面的程式碼中，我們使用 apply() 方法將 nums 陣列作為引數傳遞給 sum() 函數，從而計算出它們的和。
在 JavaScript 中，我們可以使用 call() 方法來實現繼承。前面講解物件時也用到過。例如：
function Animal(name) {
this.name = name;
}
function Dog(name, breed) {
Animal.call(this, name);
this.breed = breed;
}
const myDog = new Dog('Fido', 'Golden Retriever');
console.log(myDog.name); // "Fido"
console.log(myDog.breed); // "Golden Retriever"
在上面的程式碼中，我們定義了 Animal 和 Dog 兩個建構函式，並使用 call() 方法將 Animal 的屬性和方法繼承到 Dog 中。
使用 bind() 方法可以實現部分應用函數，即將一個函數的部分引數固定下來，返回一個新的函數。例如：
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(3)); // 6
console.log(double(4)); // 8
在上面的程式碼中，我們使用 bind() 方法將 multiply() 函數的第一個引數固定為 2，從而建立了一個新的函數 double()，它的作用是將傳入的引數乘以 2。
總之，apply()、call() 和 bind() 方法非常有用，並且在 JavaScript 開發中經常被使用。熟練掌握它們的用法可以幫助我們更好地編寫高質量的程式碼。