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

蜜瓜發表於2021-11-03

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

公眾號【前端嘛】

【面試題】手寫call、apply、bind
2024-03-14
面試題APP
手寫call、apply、bind實現及詳解
2019-02-03
APP
手寫call,apply,bind
2019-03-19
APP
手寫call、apply、bind
2021-01-16
APP
call,apply,bind,new實現原理
2019-02-25
APP
模擬實現apply/call/bind
2019-02-22
APP
js call、apply、bind的實現
2019-01-21
JSAPP
bind，call，apply模擬實現
2020-09-17
APP
面試官：什麼是函式柯里化？能手寫實現嗎？
2021-11-02
面試函式
也談如何實現bind、apply、call
2020-04-20
APP
apply call bind的用法與實現
2020-05-11
APP
this、apply、call、bind
2019-03-04
APP
js深入之實現call、apply和bind
2019-07-21
JSAPP
JavaScript之call, apply, bind, new的實現
2018-11-26
JavaScriptAPP
JavaScript自我實現系列（2）：call,apply,bind
2018-12-03
JavaScriptAPP
Javascript - apply、call、bind
2019-03-03
JavaScriptAPP
this, call, apply 和 bind
2019-05-14
APP
?徹底弄清 this call apply bind 以及原生實現
2019-03-07
APP
bind、call、apply的區別與實現原理
2019-02-16
APP
手寫 call apply bind 詳細解讀
2019-12-30
APP
手寫JS函式的call、apply、bind
2023-02-14
JS函式APP
詳解 new/bind/apply/call 的模擬實現
2019-03-29
APP
js之call,apply和bind的模擬實現
2019-05-05
JSAPP
JavaScript 之 call和apply，bind 的模擬實現
2017-10-15
JavaScriptAPP
記一次面試題——call、apply、bind模擬實現的更好方式
2019-01-18
面試題APP
apply & call & bind 原始碼
2019-11-20
APP原始碼
bind/call/apply 深度理解
2019-02-19
APP
apply，call，bind的用法
2019-02-16
APP
call、apply、bind 區別
2019-01-08
APP
apply call bind 簡介
2018-12-08
APP
this指向與call,apply,bind
2021-10-19
APP
call apply bind區別
2018-07-02
APP
重寫JS中的apply，call，bind，new方法
2019-01-20
JSAPP
模擬js中的call、apply和bind的實現
2019-03-06
JSAPP
[譯] Javascript: call()、apply() 和 bind()
2019-03-02
JavaScriptAPP
JavaScript重識bind、call、apply
2019-04-17
JavaScriptAPP
JavaScript 中的 apply、call、bind
2023-02-23
JavaScriptAPP
JS中的call、apply、bind
2018-03-29
JSAPP