用原生js實現一個bind方法

channg 發布于2019-08-22 18:04 / 1048人閱讀

摘要：下面我們用一下方法來修改上面的例子我們看到通過方法就可以輸出了語法格式參數當綁定函數被調用時，該參數會作為原函數運行時的指向。一個綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。

bind用法介紹：

bind()方法創建一個新的函數, 當被調用時，將其this關鍵字設置為提供的值，在調用新函數時，在任何提供之前提供一個給定的參數序列。

這段是來自MDN:bind的介紹,我們可以理解bind方法返回一個新的函數，這個函數內部的this指向提供的參數值，來看個例子

 const person = {
      age: 20,
      getAge() {
        return this.age
      }
    }
  const getAge = person.getAge
  console.log(getAge()) // output :undefined

上面代碼輸出了undefined，什么原因呢？相信大家都知道，getAge()執行時內部的this指向了window,而window并沒有age這個屬性，我們并沒有定義全局的age變量，那我們怎么解決這個問題呢？那就是用哪個bind方法，需要注意的是bind方法的兼容性,IE9以上包括IE9。其他現代瀏覽器不用說肯定是支持的。下面我們用一下bind方法來修改上面的例子

 const person = {
      age: 20,
      getAge() {
        return this.age
      }
    }
  const getAge = person.getAge.bind(person)
  console.log(getAge()) // output :20

我們看到通過bind方法就可以輸出age了

bind語法格式

fun.bind(thisArg[, arg1[, arg2[, ...]]])

參數

thisArg

當綁定函數被調用時，該參數會作為原函數運行時的 this 指向。當使用new 操作符調用綁定函數時，該參數無效。

arg1, arg2, ...

當綁定函數被調用時，這些參數將置于實參之前傳遞給被綁定的方法

返回值

返回由指定的this值和初始化參數改造的原函數拷貝

個人理解：bind方法接受的第一個參數是你想綁定的this值，通常是個對象，這個對象在函數內部用this可以獲取到，第一個參數后面可以跟若干個參數，這些參數可以在bind的時候傳遞，相當于預設參數。

好了，知道用法和參數后我們就可以實現一個簡陋版的了

Function.prototype.bind=function (context) {
  if(typeof this !=="function"){
    throw new Error(`${this.name} is not a function`)
  }
  const srcFun=this// 保存原始函數
  const arg=Array.prototype.slice.call(arguments,1)// 把arguments類數組轉為真實數組
  let noop=function(){}
  const fBound= function () {
   if(this instanceof noop){
     context=this
   }
    // 合并新舊參數
    return srcFun.apply(context,arg.concat(Array.prototype.slice.call(arguments,0)))
  }
  if(this.prototype){
    noop.prototype=this.prototype//維護原型關系，指向原始函數
  }
  fBound.prototype=new noop()//新函數的prototype的__proto__指向noop.prototype
  return fBound
}

很簡陋，沒有嚴謹的判斷。

一個綁定函數也能使用new操作符創建對象：這種行為就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。

上面是MDN的一段話，也就是bind返回的函數也可以當做構造函數來用，此時bind傳遞的第一個參數無效，但是其他參數有效。

那么要做判斷處理就是

//代碼2
if(this instanceof noop){
     context=this
   }

這段代碼就可以區分出是在把函數當做構造函數來new了還是當做普通方法來調用了，我們知道
當new 的時候實際做了這點事

var obj={}
obj._proto_=構造函數的prototype
構造函數.call(obj)

所以現在在代碼2中的this是構造函數的實例,那就得更改bind后的函數，讓bind后的fBound函數的prototype指向noop的實例，這樣此時的this就借助noop實例指向了noop的原型，那么this instanceof noop就是true了

總結

上面是我對bind方法的一些理解和實現，僅供參考和學習。bind方法在react中會比較常用到，有些面試題也會讓自己實現一個，所以嘗試一下也能學到不少東西了。

云服務器 GPU云服務器原生js實現 ajax原生js實現原生js實現addclass 原生js實現ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95473.html

如何寫一個實用的bind？

摘要：方法創建一個新的函數當被調用時，它的關鍵字被設置為提供的值。語法簡單地看一下這些參數的含義當綁定函數被調用時，該參數會作為原函數運行時的指向當使用操作符調用綁定函數時，該參數無效。結尾文章很簡短，知道怎么實現一個原生的就行。前言這是underscore.js源碼分析的第五篇，如果你對這個系列感興趣，歡迎點擊 underscore-analysis/ watch一下，隨時可以看到動態...

zhaofeihao 2019-08-20 16:44 評論0 收藏0
如何寫一個實用的bind？

摘要：方法創建一個新的函數當被調用時，它的關鍵字被設置為提供的值。語法簡單地看一下這些參數的含義當綁定函數被調用時，該參數會作為原函數運行時的指向當使用操作符調用綁定函數時，該參數無效。結尾文章很簡短，知道怎么實現一個原生的就行。前言這是underscore.js源碼分析的第五篇，如果你對這個系列感興趣，歡迎點擊 underscore-analysis/ watch一下，隨時可以看到動態...

Prasanta 2019-08-01 16:51 評論0 收藏0
徹底弄清 this call apply bind 以及原生實現有關 JS 中的 this、call、apply 和 bind 的概念網絡上已經有很多文章講解了這篇文章目的是梳理一下這幾個概念的知識點以及闡述如何用原生 JS 去實現這幾個功能 this 指向問題 this this 的指向在嚴格模式和非嚴格模式下有所不同；this 究竟指向什么是，在絕大多數情況下取決于函數如何被調用全局執行...

zr_hebo 2019-08-26 13:32 評論0 收藏0
js基礎深入淺出

摘要：當多個事件觸發的時候，會把異步事件依次的放入里等同步事件執行完之后，再去隊列里一個個執行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經典實例總結那些剪不斷理還亂的關系持續不斷更新。。。基本類型和引用類型 vue props | Primitive vs Reference Types 基本類型和字面值之間的區別基本類型和字面值相等，...

phodal 2019-08-20 16:21 評論0 收藏0