JS前端面試手寫apply和bind實例

更新時間：2022年12月07日 09:47:27 作者：一條會coding的Shark

這篇文章主要為大家介紹了JS前端面試手寫apply和bind實例的輕松實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

面試官問：“聊一聊你理解的 apply 和 bind。”

于是我便開始開始介紹起這兩個知識點，最后順帶提了它們的實現(xiàn)代碼。

這不提倒還好，一提就出了大事，一下子給面試官找到了面試題目。

面試官緊接著說：“既然你提到了代碼，那就手寫一下它倆吧。”

我一下子不知所措。雖然我了解過 apply 和 bind 手寫代碼，但是現(xiàn)在讓我立馬手寫出來它們，實屬有些困難。

不過最后還是硬著頭皮寫了一下，但是結(jié)果不盡人意。

apply && bind

函數(shù) apply 和 bind 在日常開發(fā)中經(jīng)常會被用到，理解它們的作用以及邏輯至關(guān)重要。所以今天我們來探討一下它們的實現(xiàn)邏輯，并對它們進行手寫，來學(xué)會如何輕松手寫它們。

apply && bind 作用

知己知彼，方能百戰(zhàn)百勝。在進行手寫之前，我們先來簡單聊一下它們。眾所周知，apply 和 bind 作用是改變函數(shù)的調(diào)用對象。很多人對這個不是很理解，什么是函數(shù)的調(diào)用對象呢？其實簡單點理解就是改變函數(shù)的 this 對象指向。因為這時候 this 在函數(shù)就充當(dāng)了一個調(diào)用的作用，而 apply 和 bind 就是有著改變 this 指向的作用。

apply 的其他作用，是改變對象的執(zhí)行上下文，并且是立即執(zhí)行的。 bind 也能改變對象的執(zhí)行上下文。

相同點 VS 不同點

它們的相同點在于都可以改變 this 的指向，并且傳入的第一個參數(shù)都是綁定的 this，不同點在于 bind 返回的是一個改變了 this 指向的函數(shù)，便于稍后調(diào)用，而 apply 會立即調(diào)用。另外 apply 是一次性傳入?yún)?shù)，而 bind 可以分為多次傳入。

輕松手寫

有了理論基礎(chǔ)，我們可以開始手寫部分了。

手寫實現(xiàn) apply

我們先來看 apply，apply 手寫實現(xiàn)其實很簡單，大致思路如下：

首先用 typeof 來檢查調(diào)用 apply 的對象是否為函數(shù)，如果不是則拋出錯誤。然后將函數(shù)作為傳入的 context 對象的一個屬性，并調(diào)用該函數(shù)。最后調(diào)用之后通過 delete 刪除該屬性，避免對傳入對象造成污染。context 代表上下文對象。

代碼如下：

Function.prototype.apply = function (context, args) {
  if (typeof this !== 'function') {
    console.log('not a function')
  }
  const fn = Symbol()
  context[fn] = this
  context[fn](...args)
  delete context[fn]
}

這里使用到了新的 Symbol 數(shù)據(jù)類型，主要是避免在把函數(shù)賦值給 context 對象的時候，因為屬性名沖突而覆蓋掉原有屬性。

手寫實現(xiàn) bind

相比較與 apply 手寫，我個人覺得 bind 手寫會相對復(fù)雜一些。bind 手寫實現(xiàn)思路如下：

和之前一樣，首先判斷調(diào)用對象是否為函數(shù)，然后獲取其余傳入?yún)?shù)值，并創(chuàng)建一個函數(shù)返回。最后根據(jù)調(diào)用方式，傳入不同的綁定值。

函數(shù)內(nèi)部使用 apply 來綁定函數(shù)調(diào)用，需要判斷函數(shù)作為構(gòu)造函數(shù)的情況，這個時候需要傳入當(dāng)前函數(shù)的 this 給 apply 調(diào)用，其余情況都傳入指定的上下文對象 context。

代碼如下：

Function.prototype.myBind = function(context) {
  if (typeof this !== "function") {
    console.log("Error");
  }
  let args = [...arguments].slice(1),
  fn = this;
  return function Fn() {
    return fn.apply(
      this instanceof Fn ? this : context,  
      args.concat(...arguments)
    );
  };
};