前端面試手寫代碼——call、apply、bind-有解無憂

1 call、apply、bind 用法及對比

1.1 Function.prototype

三者都是Function原型上的方法，所有函式都能呼叫它們

Function.prototype.call
Function.prototype.apply
Function.prototype.bind

1.2 語法

fn代表一個函式

fn.call(thisArg, arg1, arg2, ...) // 接收引數串列
fn.apply(thisArg, argsArray) // apply 接收陣列引數
fn.bind(thisArg, arg1, arg2, ...) // 接收引數串列

1.3 引數說明

thisArg：在 fn 運行時使用的 this 值

arg1,arg2,...：引數串列，傳給 fn 使用的

argsArray：陣列或類陣列物件（比如Arguments物件），傳給 fn 使用的

1.4 回傳值

call、apply：同 fn 執行后的回傳值

bind：回傳一個原函式的拷貝，并擁有指定的 this 值和初始引數，并且回傳的函式可以傳參，

const f = fn.bind(obj, arg1, arg2, ...)
f(a, b, c, ...)
// 呼叫 f 相當于呼叫 fn.call(obj, ...args)
// args是呼叫bind傳入的引數加上呼叫f傳入的引數串列
// 即arg1,arg2...a,b,c...

1.5 作用

三個方法的作用相同：改變函式運行時的this值，可以實作函式的重用

1.6 用法舉例

function fn(a, b) {
    console.log(this.myName);
}

const obj = {
    myName: '蜜瓜'
}

fn(1, 2) 
// 輸出：undefined 
// 因為此時this指向全域物件，全域物件上沒有myName屬性

fn.call(obj, 1, 2) 
fn.apply(obj, [1, 2])
// 輸出：蜜瓜
// 此時this指向obj，所以可以讀取到myName屬性

const fn1 = fn.bind(obj, 1, 2)
fn1()
// 輸出：蜜瓜
// 此時this指向obj，所以可以讀取到myName屬性

1.7 三個方法的對比

方法	功能	引數	是否立即執行
`apply`	改變函式運行時的`this`值	陣列	是
`call`	改變函式運行時的`this`值	引數串列	是
`bind`	改變函式運行時的`this`值	引數串列	否，回傳一個函式

apply和call會立即獲得執行結果，而bind會回傳一個已經指定this和引數的函式，需要手動呼叫此函式才會獲得執行結果
apply和call唯一的區別就是引數形式不同
只有apply的引數是陣列，記憶方法：apply和陣列array都是a開頭

2 實作call、apply、bind

2.1 實作call

2.1.1 易混淆的變數指向

現在我們來實作call方法，命名為myCall

我們把它掛載到Function的原型上，讓所有函式能呼叫這個方法

// 我們用剩余引數來接收引數串列
Function.prototype.myCall = function (thisArg, ...args) {
  console.log(this)
  console.log(thisArg)
}

首先要明白的是這個函式中this、thisArg分別指向什么

看看我們是怎么呼叫的：

fn.myCall(obj, arg1, arg2, ...)

所以，myCall中的this指向fn，thisArg指向obj（目標物件）

我們的目的是讓fn運行時的this（注意這個this是fn中的）指向thisArg即目標物件

換句話說就是讓fn成為obj這個物件的方法來運行（核心思路）

2.1.2 簡易版call

我們根據上述核心思路可以寫出一個簡單版本的myCall

Function.prototype.myCall = function (thisArg, ...args) {
  // 給thisArg新增一個方法
  thisArg.f = this; // this就是fn
  // 運行這個方法，傳入剩余引數
  let result = thisArg.f(...args);
  // 因為call方法的回傳值同fn
  return result;
};

call方法的基本功能就完成了，但是顯然存在問題：

倘若有多個函式同時呼叫這個方法，并且目標物件相同，則存在目標物件的f屬性被覆寫的可能

fn1.myCall(obj)
fn2.myCall(obj)

目標物件上會永遠存在這個屬性f

解決方案：

ES6引入了一種新的原始資料型別Symbol，表示獨一無二的值，最大的用法是用來定義物件的唯一屬性名，
delete 運算子用于洗掉物件的某個屬性

2.1.3 優化明顯問題后的call

優化后的myCall：

Function.prototype.myCall = function (thisArg, ...args) {
  // 生成唯一屬性名，解決覆寫的問題
  const prop = Symbol()
  // 注意這里不能用.
  thisArg[prop] = this; 
  // 運行這個方法，傳入剩余引數，同樣不能用.
  let result = thisArg[prop](...args);
  // 運行完洗掉屬性
  delete thisArg[prop]
  // 因為call方法的回傳值同fn
  return result;
};

至此myCall方法的功能就相對完整了，但是還有一些細節需要補充

2.1.4 補充細節后的call

如果我們傳入的thisArg（目標物件）是undefined或者null，我們就將其替換為指向全域物件（MDN檔案就是這么描述的）

// 完整代碼
Function.prototype.myCall = function (thisArg, ...args) {
  // 替換為全域物件：global或window
  thisArg = thisArg || global
  const prop = Symbol();
  thisArg[prop] = this;
  let result = thisArg[prop](...args);
  delete thisArg[prop];
  return result;
};

2.2 實作apply

apply和call實作思路一樣，只是傳參形式不同

// 把剩余引數改成接收一個陣列
Function.prototype.myApply = function (thisArg, args) {
  thisArg = thisArg || global
  // 判斷是否接收引數，若未接收引數，替換為[]
  args = args || []
  const prop = Symbol();
  thisArg[prop] = this;
  // 用...運算子展開傳入
  let result = thisArg[prop](...args);
  delete thisArg[prop];
  return result;
};

2.3 實作bind

2.3.1 簡易版bind

實作思路：bind會創建一個新的系結函式，它包裝了原函式物件，呼叫系結函式會執行被包裝的函式

前面已經實作了call和apply，我們可以選用其中一個來系結this，然后再封裝一層函式，就能得到一個簡易版的方法：

Function.prototype.myBind = function(thisArg, ...args) {
  // this指向的是fn
  const self = this
  // 回傳系結函式
  return function() {
    // 包裝了原函式物件
    return self.apply(thisArg, args)
  }
}

2.3.2 注意點

注意apply的引數形式是陣列，所以我們傳入的是args而非...args
為什么要在return前定義self來保存this？

因為我們需要利用閉包將this（即fn）保存起來，使得myBind方法回傳的函式在運行時的this值能夠正確地指向fn

具體解釋如下：

// 如果不定義self
Function.prototype.myBind = function(thisArg, ...args) {
  return function() {
    return this.apply(thisArg, args)
  }
}
const f = fn.myBind(obj) // 回傳一個函式
// 為了看得清楚，寫成下面這種形式
// 其中thisArg、args保存在記憶體中，這是因為形成了閉包
const f = function() {
  return this.apply(thisArg, args)
}
// 現在我們呼叫f
// 會發現其this指向全域物件（window/global）
// 而非我們期望的fn
f()

2.3.3 讓bind回傳的函式（系結函式）可以傳參

前面說了bind回傳的引數可以傳參（見1.4），現在來對myBind進行改進：

Function.prototype.myBind = function(thisArg, ...args) {
  const self = this
  // 回傳系結函式，用剩余引數接收引數
  return function(...innerArgs) {
    // 合并兩次傳入的引數
    const finalArgs = [...args, ...innerArgs]
    return self.apply(thisArg, finalArgs)
  }
}

2.3.4 “new + 系結函式”存在什么問題

MDN：系結函式也可以使用 new 運算子構造，它會表現為目標函式已經被構建完畢了似的，提供的 this 值會被忽略，但前置引數仍會提供給模擬函式，

這是MDN檔案中的描述，意思是系結函式可以作為建構式來創建實體，并且先前作為bind方法的第一個引數傳入的目標物件thisArg失效，但是先前提供的引數依然有效，

先來看我們的myBind

系結函式的內部：

// 系結函式f
function(...innerArgs) {
  ...
  // 為了看得清楚，這里直接將self寫成了fn
  return fn.apply(thisArg, finalArgs)
}

用new來創建f的實體：

const o = new f()

我們都知道（如果不知道看這篇：前端面試手寫代碼——模擬實作new運算子），new的程序中會執行建構式的代碼，即此處系結函式f中的代碼會被執行，

包括fn.apply(thisArg, finalArgs)這句代碼，并且其中的thisArg仍然有效，這就不符合原生bind方法的描述了

2.3.5 系結函式中怎么區分是否使用了new

如何解決：用new創建系結函式的實體時，讓先前傳入的thisArg失效

事實上對于系結函式f來說，執行時的this值并不確定，

如果我們直接執行f，那么系結函式中的this指向全域物件，
如果我們用new來創建f的實體，那么f中的this指向新創建的實體，（這點如果不清楚看這篇：前端面試手寫代碼——模擬實作new運算子）

Function.prototype.myBind = function(thisArg, ...args) {
  const self = this
  return function(...innerArgs) {
    console.log(this) // 注意此處的this并不確定
    const finalArgs = [...args, ...innerArgs]
    return self.apply(thisArg, finalArgs)
  }
}
// 系結函式
const f = fn.myBind(obj)
// 如果我們直接執行f，那么系結函式中的this指向全域物件
f()
// 如果我們用new來創建f的實體，那么f中的this指向新創建的實體
const o = new f()

基于上述兩種情況，我們可以修改myBind回傳的系結函式，在函式內對this值進行判斷，從而區分是否使用了new運算子

對myBind進行如下更改：

Function.prototype.myBind = function(thisArg, ...args) {
  const self = this
  const bound = function(...innerArgs) {
    const finalArgs = [...args, ...innerArgs]
    const isNew = this instanceof bound // 以此來判斷是否使用了new
    if (isNew) {
      
    } 
    // 未使用new就跟原來一樣回傳
    return self.apply(thisArg, finalArgs)
  }
  return bound
}

2.3.6 補充完系結函式內部操作

現在我們需要知道如果是new構造實體的情況應該進行哪些操作，

看看使用原生bind方法是什么結果：

const fn = function(a, b) {
  this.a = a
  this.b = b
}
const targetObj = {
  name: '蜜瓜'
}
// 系結函式
const bound = fn.bind(targetObj, 1)
const o = new bound(2)
console.log(o); // fn { a: 1, b: 2 }
console.log(o.constructor); // [Function: fn]
console.log(o.__proto__ === fn.prototype); // true

可以看到，new bound()回傳的是以fn為建構式創建的實體，

根據這點可以補充完if (new) {}中的代碼：

Function.prototype.myBind = function(thisArg, ...args) {
  const self = this
  const bound = function(...innerArgs) {
    const finalArgs = [...args, ...innerArgs]
    const isNew = this instanceof bound // 以此來判斷是否使用了new
    if (isNew) {
      // 直接創建fn的實體
      return new self(...finalArgs)
    } 
    // 未使用new就跟原來一樣回傳
    return self.apply(thisArg, finalArgs)
  }
  return bound
}
const bound = fn.myBind(targetObj, 1)
const o = new bound(2)

這樣，const o = new bound(2)相當于const o = new self(...finalArgs)，因為建構式如果顯式回傳一個物件，就會直接覆寫new程序中創建的物件（不知道的話可以看看這篇: 前端面試手寫代碼——模擬實作new運算子)

2.3.7 完整代碼

Function.prototype.myBind = function(thisArg, ...args) {
  const self = this
  const bound = function(...innerArgs) {
    const finalArgs = [...args, ...innerArgs]
    const isNew = this instanceof bound
    if (isNew) {
      return new self(...finalArgs)
    } 
    return self.apply(thisArg, finalArgs)
  }
  return bound
}

事實上，這段代碼仍存在和原生bind出入的地方，但是這里只是表達實作bind的一個整體思路，不必苛求完全一致

3 補充

apply、call方法還有一些細節我們沒有實作：如果這個函式（fn）處于非嚴格模式下，則指定為 null 或 undefined 時會自動替換為指向全域物件，原始值會被包裝（比如1會被包裝類Number包裝成物件），
bind方法也是函式柯里化的一個應用，不熟悉柯里化的可以看看這篇內容：前端面試手寫代碼——JS函式柯里化

公眾號【前端嘛】獲取更多優質內容合集

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/338957.html

標籤：其他

上一篇：前端面試手寫代碼——call、apply、bind

下一篇：封裝一個的toast彈出框（vue專案）