国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

用原生js實(shí)現(xiàn)一個(gè)bind方法

channg / 1040人閱讀

摘要：下面我們用一下方法來(lái)修改上面的例子我們看到通過(guò)方法就可以輸出了語(yǔ)法格式參數(shù)當(dāng)綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的指向。一個(gè)綁定函數(shù)也能使用操作符創(chuàng)建對(duì)象這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。

bind用法介紹： 
bind()方法創(chuàng)建一個(gè)新的函數(shù), 當(dāng)被調(diào)用時(shí)，將其this關(guān)鍵字設(shè)置為提供的值，在調(diào)用新函數(shù)時(shí)，在任何提供之前提供一個(gè)給定的參數(shù)序列。

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

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

上面代碼輸出了undefined，什么原因呢？相信大家都知道，getAge()執(zhí)行時(shí)內(nèi)部的this指向了window,而window并沒(méi)有age這個(gè)屬性，我們并沒(méi)有定義全局的age變量，那我們?cè)趺唇鉀Q這個(gè)問(wèn)題呢？那就是用哪個(gè)bind方法，需要注意的是bind方法的兼容性,IE9以上包括IE9。其他現(xiàn)代瀏覽器不用說(shuō)肯定是支持的。下面我們用一下bind方法來(lái)修改上面的例子

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

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

bind語(yǔ)法格式 
fun.bind(thisArg[, arg1[, arg2[, ...]]])
參數(shù)

thisArg

當(dāng)綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的 this 指向。當(dāng)使用new 操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。

arg1, arg2, ...

當(dāng)綁定函數(shù)被調(diào)用時(shí)，這些參數(shù)將置于實(shí)參之前傳遞給被綁定的方法
返回值 
返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝

個(gè)人理解：bind方法接受的第一個(gè)參數(shù)是你想綁定的this值，通常是個(gè)對(duì)象，這個(gè)對(duì)象在函數(shù)內(nèi)部用this可以獲取到，第一個(gè)參數(shù)后面可以跟若干個(gè)參數(shù)，這些參數(shù)可以在bind的時(shí)候傳遞，相當(dāng)于預(yù)設(shè)參數(shù)。

好了，知道用法和參數(shù)后我們就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)陋版的了

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

很簡(jiǎn)陋，沒(méi)有嚴(yán)謹(jǐn)?shù)呐袛唷?/p> 

一個(gè)綁定函數(shù)也能使用new操作符創(chuàng)建對(duì)象：這種行為就像把原函數(shù)當(dāng)成構(gòu)造器。提供的 this 值被忽略，同時(shí)調(diào)用時(shí)的參數(shù)被提供給模擬函數(shù)。

上面是MDN的一段話，也就是bind返回的函數(shù)也可以當(dāng)做構(gòu)造函數(shù)來(lái)用，此時(shí)bind傳遞的第一個(gè)參數(shù)無(wú)效，但是其他參數(shù)有效。

那么要做判斷處理就是

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

這段代碼就可以區(qū)分出是在把函數(shù)當(dāng)做構(gòu)造函數(shù)來(lái)new了還是當(dāng)做普通方法來(lái)調(diào)用了，我們知道
當(dāng)new 的時(shí)候?qū)嶋H做了這點(diǎn)事

var obj={}
obj._proto_=構(gòu)造函數(shù)的prototype
構(gòu)造函數(shù).call(obj)

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

總結(jié)

上面是我對(duì)bind方法的一些理解和實(shí)現(xiàn)，僅供參考和學(xué)習(xí)。bind方法在react中會(huì)比較常用到，有些面試題也會(huì)讓自己實(shí)現(xiàn)一個(gè)，所以嘗試一下也能學(xué)到不少東西了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95473.html

相關(guān)文章

  • 如何寫(xiě)一個(gè)實(shí)用的bind？

    摘要：方法創(chuàng)建一個(gè)新的函數(shù)當(dāng)被調(diào)用時(shí)，它的關(guān)鍵字被設(shè)置為提供的值。語(yǔ)法簡(jiǎn)單地看一下這些參數(shù)的含義當(dāng)綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的指向當(dāng)使用操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。結(jié)尾文章很簡(jiǎn)短，知道怎么實(shí)現(xiàn)一個(gè)原生的就行。 前言 這是underscore.js源碼分析的第五篇，如果你對(duì)這個(gè)系列感興趣，歡迎點(diǎn)擊 underscore-analysis/ watch一下，隨時(shí)可以看到動(dòng)態(tài)...

    zhaofeihao 評(píng)論0 收藏0

  • 如何寫(xiě)一個(gè)實(shí)用的bind？

    摘要：方法創(chuàng)建一個(gè)新的函數(shù)當(dāng)被調(diào)用時(shí)，它的關(guān)鍵字被設(shè)置為提供的值。語(yǔ)法簡(jiǎn)單地看一下這些參數(shù)的含義當(dāng)綁定函數(shù)被調(diào)用時(shí)，該參數(shù)會(huì)作為原函數(shù)運(yùn)行時(shí)的指向當(dāng)使用操作符調(diào)用綁定函數(shù)時(shí)，該參數(shù)無(wú)效。結(jié)尾文章很簡(jiǎn)短，知道怎么實(shí)現(xiàn)一個(gè)原生的就行。 前言 這是underscore.js源碼分析的第五篇，如果你對(duì)這個(gè)系列感興趣，歡迎點(diǎn)擊 underscore-analysis/ watch一下，隨時(shí)可以看到動(dòng)態(tài)...

    Prasanta 評(píng)論0 收藏0

  • 徹底弄清 this call apply bind 以及原生實(shí)現(xiàn) 有關(guān) JS 中的 this、call、apply 和 bind 的概念網(wǎng)絡(luò)上已經(jīng)有很多文章講解了 這篇文章目的是梳理一下這幾個(gè)概念的知識(shí)點(diǎn)以及闡述如何用原生 JS 去實(shí)現(xiàn)這幾個(gè)功能 this 指向問(wèn)題 this this 的指向在嚴(yán)格模式和非嚴(yán)格模式下有所不同；this 究竟指向什么是，在絕大多數(shù)情況下取決于函數(shù)如何被調(diào)用 全局執(zhí)行...

    zr_hebo 評(píng)論0 收藏0

  • js基礎(chǔ)深入淺出

    摘要：當(dāng)多個(gè)事件觸發(fā)的時(shí)候，會(huì)把異步事件依次的放入里等同步事件執(zhí)行完之后，再去隊(duì)列里一個(gè)個(gè)執(zhí)行拾遺常用方法總結(jié)面試的信心來(lái)源于過(guò)硬的基礎(chǔ)參考高級(jí)程序設(shè)計(jì)你所不知道的深入淺出知識(shí)點(diǎn)思維導(dǎo)圖經(jīng)典實(shí)例總結(jié)那些剪不斷理還亂的關(guān)系 持續(xù)不斷更新。。。 基本類(lèi)型和引用類(lèi)型 vue props | Primitive vs Reference Types 基本類(lèi)型和字面值之間的區(qū)別 基本類(lèi)型和字面值相等，...

    phodal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<