前言

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

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

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

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

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

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

apply && bind

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

apply && bind 作用

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

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

相同點 VS 不同點

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

輕松手寫

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

手寫實現(xiàn) apply

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

首先用 typeof 來檢查調用 apply 的對象是否為函數(shù)，如果不是則拋出錯誤。然后將函數(shù)作為傳入的 context 對象的一個屬性，并調用該函數(shù)。 最后調用之后通過 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ù)據類型，主要是避免在把函數(shù)賦值給 context 對象的時候，因為屬性名沖突而覆蓋掉原有屬性。

手寫實現(xiàn) bind

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

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

函數(shù)內部使用 apply 來綁定函數(shù)調用，需要判斷函數(shù)作為構造函數(shù)的情況，這個時候需要傳入當前函數(shù)的 this 給 apply 調用，其余情況都傳入指定的上下文對象 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)
    );
  };
};

總結

關于它們的手寫就到這里了，相信下次再面對同樣的問題時處理起來就能游刃有余了。這兩個手寫各有各的特點，我個人建議可以多寫寫 bind 的手寫，我覺得它會比 apply 出錯率更高。

雖然文章中是以手寫 apply 和 bind 為主，但是并不缺少 js 相關知識點，比如 this 指向問題，總之，js 很重要，既是基礎又是重點。

以上就是手寫apply和bind實例的輕松實現(xiàn)詳解的詳細內容，更多關于apply bind手寫實例的資料請關注腳本之家其它相關文章！

最新評論