<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • call、apply、bind 原理實(shí)現(xiàn)

    2020-4-6    seo達(dá)人

    目錄

    1. call 的模擬實(shí)現(xiàn)
    2. apply 的模擬實(shí)現(xiàn)
    3. bind 的模擬實(shí)現(xiàn)
    4. 三者異同



      學(xué)習(xí)并參考于:



      JavaScript深入之call和apply的模擬實(shí)現(xiàn)



      JS的call,apply與bind詳解,及其模擬實(shí)現(xiàn)





      (一)call的模擬實(shí)現(xiàn)

      call 用法 : MDN Function.prototype.call()



      call() 方法使用一個(gè)指定的 this 值和可選的參數(shù)列表來(lái)調(diào)用一個(gè)函數(shù)。



      call() 提供新的 this 值給當(dāng)前調(diào)用的函數(shù)/方法。


    5. call 實(shí)現(xiàn)主要思路:

      將函數(shù)設(shè)為對(duì)象的屬性



      執(zhí)行該函數(shù)



      刪除該函數(shù)



      另外還有考慮:



      call 函數(shù)還能給定參數(shù)執(zhí)行函數(shù)

      this 參數(shù)不傳,或者傳null,undefined, this指向window對(duì)象

      函數(shù)是可以有返回值的
    6. 實(shí)現(xiàn):

      Function.prototype.myCall = function () {

        if (typeof this !== 'function') {

          throw new TypeError('error!')

        }

        let context = arguments[0] || window   //this 參數(shù)可以傳 null,當(dāng)為 null 的時(shí)候,視為指向 window

        context.fn = this  // 首先要獲取調(diào)用call的函數(shù),用this可以獲取

        let args = [...arguments].slice(1) //從 Arguments 對(duì)象中取值,取出第二個(gè)到最后一個(gè)參數(shù)   

        let result = context.fn(...args)  //函數(shù)是可以有返回值的

        delete context.fn

        return result

      }


    7. 測(cè)試:

      // 測(cè)試一下上面實(shí)現(xiàn)的myCall

      var value = 2;



      var obj = {

          value: 1

      }



      function bar(name, age) {

          console.log(this.value);

          return {

              value: this.value,

              name: name,

              age: age

          }

      }



      bar.call(null); // 2



      console.log(bar.myCall(obj, 'kevin', 18));

      // 1

      // Object {

      //    value: 1,

      //    name: 'kevin',

      //    age: 18

      // }



      (二)apply 的模擬實(shí)現(xiàn)

      apply 用法:MDN Function.prototype.apply()



      apply() 方法使用一個(gè)指定的 this 值和可選的參數(shù)數(shù)組 來(lái)調(diào)用一個(gè)函數(shù)。



      apply 的實(shí)現(xiàn)跟 call 類似。


    8. 實(shí)現(xiàn):

      Function.prototype.myApply = function () {

        if (typeof this !== 'function') {

          throw new TypeError('error!')

        }

        let context = arguments[0] || window

        context.fn = this

        let result = arguments[1] ? context.fn(...arguments[1]) : context.fn()

        delete context.fn

        return result

      }


    9. 測(cè)試:

      var foo = {

          value: 1

      }

      function bar(name, age) {

          console.log(name)

          console.log(age)

          console.log(this.value);

      }

      bar.myApply(foo, ['black', '18']) // black 18 1



      (三)bind 的模擬實(shí)現(xiàn)

      bind 用法:MDN Function.prototype.bind()



      bind()方法會(huì)創(chuàng)建一個(gè)新函數(shù),稱為綁定函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí),bind() 的第一個(gè)參數(shù)將作為它運(yùn)行時(shí)的 this,之后的一序列參數(shù)將會(huì)在傳遞的實(shí)參前傳入作為它的參數(shù)。



      bind是ES5新增的一個(gè)方法,不會(huì)執(zhí)行對(duì)應(yīng)的函數(shù),而是返回對(duì)綁定函數(shù)的引用。


    10. 實(shí)現(xiàn):

      Function.prototype.customBind = function () {

        if (typeof this !== 'function') {

          throw new TypeError('error!')

        }

        const that = this   // 首先要獲取調(diào)用bind的函數(shù),用this獲取并存放在that中

        let context = arguments[0] || window

        const args = [...arguments].slice(1)

        return function() {

          return that.apply(context, args.concat([...arguments]))

        }

      }



      (四)三者異同
    11. 相同:

      改變函數(shù)體內(nèi) this 的指向
    12. 不同:

      call、apply的區(qū)別:call方法接受的是參數(shù)列表,而apply方法接受的是一個(gè)參數(shù)數(shù)組。

      bind不立即執(zhí)行。而call或apply會(huì)自動(dòng)執(zhí)行對(duì)應(yīng)的函數(shù)。


    日歷

    鏈接

    個(gè)人資料

    存檔

    主站蜘蛛池模板: 国产精品久久久久一区二区三区| 久久久久人妻一区精品| 国产精品成人观看视频网站| 日韩人妻无码精品一专区| 欧美 日韩 精品 另类视频| 欧美亚洲国产精品久久蜜芽| 久久精品国产亚洲AV嫖农村妇女 | 久久99国产综合精品| 日韩欧美国产精品第一页不卡| A级毛片无码久久精品免费| 国产精品一级香蕉一区| 国语自产少妇精品视频| 十八18禁国产精品www| 无码精品久久一区二区三区| 精品久久久久中文字幕一区| 国产激情精品一区二区三区| 亚洲精品免费视频| 欧美精品第一页| 午夜精品久视频在线观看| 99精品视频在线| 97精品久久天干天天天按摩| 国产探花在线精品一区二区| 久久丫精品国产亚洲av| 亚洲国产另类久久久精品黑人| 一级做a爰黑人又硬又粗免费看51社区国产精品视| 精品国产污污免费网站入口在线| 国产精品亚洲精品日韩已方| 国产精品区AV一区二区| 国产精品亚洲视频| 久久精品国产精品亜洲毛片| 久久精品无码一区二区日韩AV | 国产成人无码精品一区二区三区| 人人妻人人澡人人爽欧美精品| 亚洲AV无码精品色午夜果冻不卡| 亚洲国产精品嫩草影院在线观看| 亚洲精品V欧洲精品V日韩精品| 少妇伦子伦精品无码STYLES| 精品少妇无码AV无码专区| 国产成人精品一区二区三区免费| 500av大全导航精品| 久久精品人人做人人爽电影|