淺談用原生 js 實現函數的 bind 方法

標籤：https   修改   javascrip   cti   列印   call   指定   context   問題   

bind的作用是讓目標函數執行時候的 this 改為指定的上下文。

一般情況下，this 取決於調用者，誰調用函數 this 就是誰（自執行函數、定時器……之類的特殊情況除外）。

有那麼一句話，在 JavaScript 中，萬物皆對象。

 1 var want = function want() { 2     console.log(this); 3 } 4  5 var good = function good() { 6     console.log(‘https://www.cnblogs.com/xwant‘) 7 } 8  9 good.go = want;10 11 good.go();12 13 // 控制台列印出good這個函數

函數也是一個對象，以對象調用函數的方式執行這個函數，這個函數的指向就變為了這個調用者。

那麼現在將這個方式封裝成一個方法。

1 Function.prototype._bind = function _bind(context) {2      if(typeof context === ‘function‘) return this;3      context.fuc = this;
4      return function () {5          context.fuc(...arguments)6      }7 };

在這裡利用 JavaScript 的這個特性，將這個函數，寫到了指定內容相關的一個屬性下。

由於直接返回 context.fun 的話，返回的其實是 context.fun 代表的這個函數體。

所以在調用這個方法的時候，方法中 this 還是指向的 window ，於是這裡套用了一個匿名函數來解決這個問題。

由於不知道要修改 this 的函數是否有形參，所以在執行的時候把匿名函數中的 arguments 拉下來，在函數執行時，將 arguments 以 ES6 的新特性解構賦值的方式傳進去，由此，函數的參數問題也解決了（只測試了簡單的傳參沒有深入測試）。

當然，這裡只論方法暫且就不說效能方面的問題。

通過 .call 或者 .apply 的方式也可以實現 bind 方法，這裡不多討論。

把上面的代碼改巴改巴， .call 和 .apply 也就實現了。

文章可能存在思路或者理解上的偏差，如果各路高手有意見或建議，還望指點一二。

淺談用原生 js 實現函數的 bind 方法