面試官：能手寫實現call、apply、bind嗎？

本文轉載自查看原文 2021-10-27 11:50 173 前端面試手寫代碼/ 前端開發/ JavaScript/ 前端面試

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函數柯里化

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 面試官:能手寫一個SpringBoot的Start嗎? 源碼來襲：bind手寫實現手寫call,apply方法實現 js-手寫call,apply,bind 「每日一題」面試官問你對Promise的理解？可能是需要你能手動實現各個特性 apply call bind的用法與實現 js深入之實現call、apply和bind 手寫HashMap，快手面試官直呼內行！手把手教你實現三種綁定方式（call、apply、bind）手寫實現簡單版IOC