閱讀本文約需要5分鐘

大家好，我是你們的導師，我每天都會給大家分享一些干貨內容(當然了，周末也要允許老師休息一下哈)。昨天給大家分享了JavaScript的call和apply的模擬實現，今天給大家分享一下bind的模擬實現。

什么是bind？

一句話介紹 bind：bind() 方法會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數將作為它運行時的 this，之后的一序列參數將會在傳遞的實參前傳入作為它的參數。(來自于 MDN )。

由此我們可以首先得出 bind 函數的兩個特點：返回一個函數、可以傳入參數。

返回函數的模擬實現

從第一個特點開始，我們舉個例子：

關于指定 this 的指向，我們可以使用 call 或者 apply 實現，關于 call 和 apply 的模擬實現，可以看看我昨天分享的文章：JavaScript之call和apply的模擬實現。我們來寫第一版的代碼：

此外，之所以 return self.apply(context)，是考慮到綁定函數可能是有返回值的，依然是這個例子：

傳參的模擬實現

接下來看第二點，可以傳入參數。這個就有點讓人費解了，我在 bind 的時候，是否可以傳參呢？我在執行 bind 返回的函數的時候，可不可以傳參呢？讓我們看個例子：

函數需要傳 name 和 age 兩個參數，竟然還可以在 bind 的時候，只傳一個 name，在執行返回的函數的時候，再傳另一個參數 age!這可咋辦？不急，我們用 arguments 進行處理：

構造函數效果的模擬實現

完成了這兩點，最難的部分到了！因為 bind 還有一個特點，就是：一個綁定函數也能使用new操作符創建對象：這種行為就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。

也就是說當 bind 返回的函數作為構造函數的時候，bind 時指定的 this 值會失效，但傳入的參數依然生效。舉個例子：

注意：盡管在全局和 foo 中都聲明了 value 值，最后依然返回了 undefind，說明綁定的 this 失效了，如果大家了解 new 的模擬實現，就會知道這個時候的 this 已經指向了 obj。

所以我們可以通過修改返回的函數的原型來實現，讓我們寫一下：

構造函數效果的優化實現

但是在這個寫法中，我們直接將 fBound.prototype = this.prototype，我們直接修改 fBound.prototype 的時候，也會直接修改綁定函數的 prototype。這個時候，我們可以通過一個空函數來進行中轉：

到此為止，大的問題都已經解決。

三個小問題

1.apply 這段代碼跟 MDN 上的稍有不同

在 MDN 中文版講 bind 的模擬實現時，apply 這里的代碼是：

self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

多了一個關于 context 是否存在的判斷，然而這個是錯誤的！舉個例子：

以上代碼正常情況下會打印 2，如果換成了 context || this，這段代碼就會打印 1！所以這里不應該進行 context 的判斷，大家查看 MDN 同樣內容的英文版，就不存在這個判斷！

2.調用 bind 的不是函數咋辦？

不行，我們要報錯！

3.我要在線上用

那別忘了做個兼容：

最終代碼

所以最最后的代碼就是：

今天就分享到這，如果覺得對你有一丟丟幫助，請點右下角【在看】，讓更多人看到該文章。大家也可以在底部給我留言，對于有價值的留言，我們都會一一回復的。

總結

以上是生活随笔為你收集整理的JavaScript网络地址作为参数_JavaScript之bind的模拟实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。