目錄

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ù)列表來調(diào)用一個(gè)函數(shù)。
   
   
   
   call() 提供新的 this 值給當(dāng)前調(diào)用的函數(shù)/方法。
   
   
   
5. call 實(shí)現(xiàn)主要思路：
   
   將函數(shù)設(shè)為對象的屬性
   
   
   
   執(zhí)行該函數(shù)
   
   
   
   刪除該函數(shù)
   
   
   
   另外還有考慮：
   
   
   
   call 函數(shù)還能給定參數(shù)執(zhí)行函數(shù)
   
   this 參數(shù)不傳，或者傳null，undefined， this指向window對象
   
   函數(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 對象中取值，取出第二個(gè)到最后一個(gè)參數(shù)   
   
     let result = context.fn(...args)  //函數(shù)是可以有返回值的
   
     delete context.fn
   
     return result
   
   }
   
   
   
7. 測試：
   
   // 測試一下上面實(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ù)組 來調(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. 測試：
   
   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()方法會創(chuàng)建一個(gè)新函數(shù)，稱為綁定函數(shù)。當(dāng)這個(gè)新函數(shù)被調(diào)用時(shí)，bind() 的第一個(gè)參數(shù)將作為它運(yùn)行時(shí)的 this，之后的一序列參數(shù)將會在傳遞的實(shí)參前傳入作為它的參數(shù)。
   
   
   
   bind是ES5新增的一個(gè)方法，不會執(zhí)行對應(yīng)的函數(shù)，而是返回對綁定函數(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會自動(dòng)執(zhí)行對應(yīng)的函數(shù)。