前言

最近由于工作比較忙，好久都沒時間靜下心來研究一些東西了。今天在研究 call 和 apply 的區別的時候，看到 github 上面的一篇文章，看完以后，感覺啟發很大。

文章鏈接為 https://github.com/lin-xin/blog/issues/7 ，有興趣的童鞋可以前往學習一下。

但是我主要想寫的并不是我今天學習了這篇博文，那樣也就太沒有技術含量了對吧。

bind的實現

其實文章并不難理解，只要是對 js 有一定程度的了解的同學就能很容易看懂。我主要關心的是文章最后給出的自己動手實現 bind 函數的代碼，代碼如下：

if (!Function.prototype.bind) {
Function.prototype.bind = function () {
var self = this, // 保存原函數
context = [].shift.call(arguments), // 保存需要綁定的this上下文
args = [].slice.call(arguments); // 剩余的參數轉為數組
return function () { // 返回一個新函數
self.apply(context,[].concat.call(args, [].slice.call(arguments)));
}
}
}

說實話，咋看這一段代碼，感覺好像很平淡無奇，但是你要是細細去體味的話，簡直能夠讓你回味無窮。

[].shift.call(arguments) 的含義

我相信，對于很多對 js 這門語言掌握并不算深的童鞋來說，這句代碼的含義貌似并不怎么容易理解，我們其實細分一下，可以拆分出好幾個知識點出來。

arguments 的含義

我相信，很多人應該知道 arguments，甚至于在實際的學習工作中也經常用到，但是我還是想在這個地方復習一下。

MDN 網站上對于 Arguments 對象是這么定義的：

arguments 是一個對應于傳遞給函數的參數的類數組對象。

我們可以看到 arguments 是一個類數組對象，他怎么用呢？別急，我們馬上給出示例：

上面是我在 chrome 瀏覽器控制臺進行的一個小測試，可以看到，arguments 是一個類數組對象，它的值中包含了我們在調用函數時候，朝里面傳入的參數。

而我們知道，對于對象的調用，我們一般采用點號—— obj.key 的調用方式或者括號加對象的key的方式—— obj[key] ，這兩種方式是完全等同的。

因此我們在創建函數的時候，其實并不需要朝里面傳入變量，直接用 arguments 的方式來獲取變量豈不是更好？依我個人的拙見，雖然這種方式接收參數很靈活，但是也存在弊端，函數的參數本來就是寫起來讓自己或者他人閱讀起來更舒服的，君不見 C、Java 中參數還要指定類型呢，JS 已經夠寬松了，再按照這種標準寬松下去，寫起來是很隨意，但是用起來就很蛋疼了。

[].shift

咋一看，你還不一定看得懂這一句代碼，其實它就等同于 Array.prototype.shift ，不信你打開你的 chrome 瀏覽器控制臺，試著輸入 Array.prototype.shift === [].shift ，然后你看看是不是能夠得到 true。也就是說，兩者其實是同一個函數，只是調用的方式存在差異，一個是通過原型的方式直接在類上調用；一個是通過實例化，繼承過來，然后再調用。

如果你對這個話題很感興趣，剛好我在知乎上看到有相關話題的討論：js中 [].slice 與 Array.prototype.slice 有什么區別?，你可以自行前往查看或者討論。

call

如果還有不知道call為何物的同學，請前往 mdn 網站 call 頁面去詳細了解。

mdn 對 call 的定義為：

call() 方法調用一個函數, 其具有一個指定的this值和分別地提供的參數(參數的列表)。

call 的語法為：

fun.call(thisArg, arg1, arg2, …)

---

在了解了上面三個小知識點以后，我們就能理解了 [].shift.call(arguments) 的含義了。arguments 是類數組對象，它沒有 shift 等數組獨有的方法，怎么辦？現在，我想要拿出傳入的參數中的第一個參數，怎么操作，就只有用這種方式了。

我們來試驗一下：

function a(){return arguments;} var temp = a("a","b");temp.slice(); //Uncaught TypeError: temp.slice is not a function

我們可以看到，如果你想直接對 temp 用 slice() 函數，不可能的，做不到的！因為 arguments 是類數組對象，并非真正的對象，并沒有 slice 方法。

但是如果你用下面方法：

[].slice.call(temp); //[“a”, “b”]

我們可以看到的是，用上面的方式，就神奇般的得到了想要的結果。

我們在類數組對象上面，成功的運用了數組的 slice 方法。也就是說，相當于，先將 temp 轉為數組，然后再對其運用了 slice 方法，然后返回了我們想要的結果。

當然，這種寫法，在 es6 面前，已經成為了過去式，es6 為數組新增了一個 from 方法，這個函數的使用方式如下：

Array.from(temp).slice(); //[“a”, “b”]

感興趣的同學，可以去 mdn 網站去了解Array.from()
因此，我們可以總結下，原來 context = [].shift.call(arguments) 這一句就是把參數中的第一個剪切出來，賦給 context，那么也就相當于起到了將 參數中的 this 保存的目的。

args = [].slice.call(arguments);

這一句，將除了 this 上下文的所有參數，傳給了 args ，以備后來使用。

bind的理解

要讀懂返回值，必須得理解，bind 的作用是什么。

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

有興趣的同學，可以前往 Function.prototype.bind() 頁面查看詳細解讀。簡單點理解，bind 就是用來綁定上下文的，強制將函數的執行環境綁定到目標作用域中去。與 call 和 apply 其實有點類似，但是不同點在于，它不會立即執行，而是返回一個函數。因此我們要想自己實現一個 bind 函數，就必須要返回一個函數，而且這個函數會接收綁定的參數的上下文。

返回函數

return function () { // 返回一個新函數
self.apply(context,[].concat.call(args, [].slice.call(arguments)));
}

這一段其實很好理解，因為bind 綁定了上下文，因此 self.apply 的第一個參數，是之前我們保存的 context。接下來，我們將 bind 的其余參數和調用bind后返回的函數在執行的過程中接收的參數進行拼接，作為一個數組傳入apply的第二個參數中去。這就完美的實現了 bind 函數的功能，不得不說很是巧妙。

后記

做業務，其實不太能用上這些技術性很強的東西，但是我們如果止步不前，也許我們當初選行業的時候就選錯了。互聯網行業發展的速度日新月異，幾天就出來了一個新的技術，我們如果不進步，就是在退步。

雖然工作很忙，但是也不能忘了充實自己。先立個 flag 吧，盡量每個星期寫一篇技術方面的博文，積少成多，慢慢的，自己也會成為大神的吧。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js中自己实现bind函数的方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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