前言

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

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

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

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

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

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

apply && bind

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

apply && bind 作用

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

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

相同點(diǎn) VS 不同點(diǎn)

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

輕松手寫

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

手寫實(shí)現(xiàn) apply

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

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

代碼如下：

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 對(duì)象的時(shí)候，因?yàn)閷傩悦麤_突而覆蓋掉原有屬性。

手寫實(shí)現(xiàn) bind

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

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

函數(shù)內(nèi)部使用 apply 來綁定函數(shù)調(diào)用，需要判斷函數(shù)作為構(gòu)造函數(shù)的情況，這個(gè)時(shí)候需要傳入當(dāng)前函數(shù)的 this 給 apply 調(diào)用，其余情況都傳入指定的上下文對(duì)象 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)
    );
  };
};

總結(jié)

關(guān)于它們的手寫就到這里了，相信下次再面對(duì)同樣的問題時(shí)處理起來就能游刃有余了。這兩個(gè)手寫各有各的特點(diǎn)，我個(gè)人建議可以多寫寫 bind 的手寫，我覺得它會(huì)比 apply 出錯(cuò)率更高。

雖然文章中是以手寫 apply 和 bind 為主，但是并不缺少 js 相關(guān)知識(shí)點(diǎn)，比如 this 指向問題，總之，js 很重要，既是基礎(chǔ)又是重點(diǎn)。

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