JS中call、apply和bind函數手寫實現demo的方法是什么

本篇內容介紹了“JS中call、apply和bind函數手寫實現demo的方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

JavaScript 中的函數是一等公民，可以像普通變量一樣被傳遞和使用。這種靈活性使得函數可以被用于各種場景，比如對象方法的調用、構造函數的創建和原型繼承等。在函數的使用過程中，call、apply、bind 是 JavaScript 中比較常用的一些方法，它們可以改變函數執行的上下文，同時還能傳遞參數。

call 方法

call 方法用于調用一個函數，并且可以設置函數內部的 this 值。它可以讓你將一個函數的 this 對象指向任意一個對象，并且傳入任意個數的參數。

下面是 call 方法的基本語法：

function.call(thisArg, arg1, arg2, ...)

其中：

• function：要調用的函數。

• thisArg：設置 function 函數中的 this 對象的值。

• arg1、arg2、...：傳遞給 function 函數的參數，可以有多個。

下面是一個簡單的示例：

const person = {
  name: 'Zhang San',
  sayHi() {
    console.log(`Hi, my name is ${this.name}.`);
  },
};
person.sayHi(); // 輸出 "Hi, my name is Zhang San."
const otherPerson = {
  name: 'Zhang San',
};
person.sayHi.call(otherPerson); // 輸出 "Hi, my name is Zhang San."

在上面的例子中，我們創建了一個 person 對象，它有一個 sayHi 方法，用于輸出自我介紹。我們使用 call 方法將 person 對象的 sayHi 方法綁定到 otherPerson 對象上，并且輸出了 otherPerson 對象的名字。

接下來，我們將手動模擬實現 call 方法，實現一個名為 myCall 的函數。

Function.prototype.myCall = function(context, ...args) {
  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

上面的代碼中，我們給 Function.prototype 添加了一個新的方法 myCall。該方法接收兩個參數，第一個參數 context 表示要綁定的 this 值，第二個參數 args 表示要傳遞給函數的參數列表。如果第一個參數 context 為空，則默認綁定到全局對象 window 上。

接著，我們在綁定的對象 context 上添加了一個 fn 屬性，并且將當前函數綁定到該屬性上，接著調用該函數，并將結果保存到 result 變量中。

最后，我們刪除 context 對象上的 fn 屬性，并將結果返回。這樣，我們就成功地手動模擬實現 call 方法。

apply 方法

apply 函數的語法為：function.apply(thisArg, [argsArray])，其中 thisArg 表示函數執行時的上下文對象，也就是函數中的 this 關鍵字所指向的對象，argsArray 是一個數組，表示函數執行時傳遞的參數列表。

實現步驟

聲明一個函數，以便在之后使用 apply 函數。

function sum(a, b) {
  return a + b;
}

然后我們現在需要為函數 sum 添加 apply 方法，該方法接受兩個參數：上下文對象 thisArg 和參數數組 argsArray。

Function.prototype.apply = function(thisArg, argsArray) {
  // 代碼實現
};

在 apply 函數中，第一個參數 thisArg 表示要調用函數的上下文對象。如果沒有傳遞 thisArg，那么默認為全局對象 window。

Function.prototype.apply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
};

我們需要在函數執行時將函數中的 this 關鍵字指向上下文對象 thisArg，從而改變函數的上下文對象。

Function.prototype.apply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
  let fn = Symbol('fn');
  thisArg[fn] = this;
  let result = thisArg[fn](...argsArray);
  delete thisArg[fn];
  return result;
};

在上述代碼中，我們使用了一個新的 Symbol 類型的變量 fn，用于存儲函數對象。然后我們將函數對象存儲在上下文對象 thisArg 中，并立即執行該函數，從而改變函數的上下文對象。最后，我們刪除存儲在上下文對象中的函數對象，并返回函數執行的結果。

下面是完整的 apply 函數的代碼實現：

function sum(a, b) {
  return a + b;
}
Function.prototype.apply = function(thisArg, argsArray) {
  thisArg = thisArg || window;
  let fn = Symbol('fn');
  thisArg[fn] = this;
  let result = thisArg[fn](...argsArray);
  delete thisArg[fn];
  return result;
};
console.log(sum.apply(null, [1, 2])); // 輸出：3

bind 方法

bind函數也是對函數的this指向進行修改的函數，不同于 call 和 apply 函數的立即執行，bind 函數返回一個新的函數，這個新的函數可以在后續調用時再傳入參數并執行。bind 函數的實現可以通過在返回的新函數中使用閉包來保存傳入的 this 值，并返回一個新函數。

bind 函數的語法如下：

function.bind(thisArg[, arg1[, arg2[, ...]]])

其中，thisArg 為需要綁定的 this 值，arg1 , arg2 等為新函數的參數。bind 函數返回一個新函數，這個新函數的 this 值被綁定為傳入的 thisArg 值，同時可以傳入額外的參數作為新函數的參數。當調用返回的新函數時，會以傳入的參數和之前綁定的 this 值作為參數調用原函數。

下面是一個手動實現的 bind 函數：

Function.prototype.bind2 = function(thisArg) {
  var self = this;
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var bindArgs = Array.prototype.slice.call(arguments);
    return self.apply(thisArg, args.concat(bindArgs));
  };
}

在實現中，先保存 this 的指向，然后將傳入的參數放到 args 數組中。接下來返回一個新的函數，這個新的函數會保存 bind2 函數中的 this 值和 args 數組中的參數。在新函數被調用時，會將之前保存的 this 值和 args 數組中的參數與新傳入的參數合并為一個數組，并調用原函數的 apply 方法傳入這個數組作為參數，以達到修改 this 值和傳入參數的目的。

“JS中call、apply和bind函數手寫實現demo的方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！