前言
在 JavaScript 中，apply、bind 和 call 是三個重要的函式，它們都是 Function.prototype 的方法，這些函式可以讓我們動態地改變函式的 this 值，或者傳遞引數來執行函式，本篇博客將詳細介紹 apply、bind 和 call 的使用方法以及它們之間的區別，
apply
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
call() 方法和 apply() 方法非常相似，但是它的引數不是陣列，而是一個一個傳遞的，call() 方法也可以用于改變函式的 this 值，
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet.call(null, 'Alice'); // 輸出 "Hello, Alice!"
在上面的例子中，我們定義了一個 greet() 函式，它接受一個引數 name，并在控制臺中輸出一潭訓迎資訊，我們使用 call() 方法將 this 值設定為 null，并將要傳遞給函式的引數一個一個地傳遞，
bind
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() 和 bind()三個方法之間的最大區別在于它們傳遞引數的方式以及它們是否是立即執行函式：
- apply() 和 call() 方法立即執行函式并且傳遞引數的方式不同，
- apply() 方法傳遞一個陣列作為引數，而 call() 方法一個個傳遞引數，
- bind() 方法不會立即執行函式，而是回傳一個新的函式，這個函式的 this 值已經被系結了，
在使用這些方法時，我們需要理解它們之間的區別，并根據具體情況進行選擇，如果我們想要立即執行一個函式并傳遞一個陣列作為引數，那么應該使用 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 中的這些方法已經預先實作好了，我們只需要使用即可
apply()、call() 和 bind() 方法的使用場景
1. 改變函式的 this 值
在 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 物件，并在函式內部使用它，
2. 函式的引數不確定
有時候我們無法確定函式的引數個數，或者我們想要將一個陣列作為引數傳遞給函式，在這種情況下，我們可以使用 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() 函式，從而計算出它們的和，
3. 繼承
在 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 中，
4. 部分應用函式
使用 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 開發中經常被使用，熟練掌握它們的用法可以幫助我們更好地撰寫高質量的代碼，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544991.html
標籤：JavaScript