<em id="09ttv"></em>
    <sup id="09ttv"><pre id="09ttv"></pre></sup>
    <dd id="09ttv"></dd>

        • 

  
      
    

          

	
          
		
          
			
          
				
          call、apply、bind 原理實現
          
				
           2020-4-6      seo達人      
          
			
          
			
          
				
          目錄
          

            

          1. call 的模擬實現
            2. 

          2. apply 的模擬實現
            3. 

          3. bind 的模擬實現
            4. 

          4. 三者異同

            


            
學習并參考于：

            


            
JavaScript深入之call和apply的模擬實現

            


            
JS的call,apply與bind詳解，及其模擬實現

            


            


            
（一）call的模擬實現

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

            


            
call() 方法使用一個指定的 this 值和可選的參數列表來調用一個函數。

            


            
call() 提供新的 this 值給當前調用的函數/方法。

            

            5. 

          5. call 實現主要思路：

            
將函數設為對象的屬性

            


            
執行該函數

            


            
刪除該函數

            


            
另外還有考慮：

            


            
call 函數還能給定參數執行函數

            
this 參數不傳，或者傳null，undefined， this指向window對象

            
函數是可以有返回值的
            6. 

          6. 實現：

            
Function.prototype.myCall = function () {

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

            
    throw new TypeError('error!')

            
  }

            
  let context = arguments[0] || window   //this 參數可以傳 null，當為 null 的時候，視為指向 window

            
  context.fn = this  // 首先要獲取調用call的函數，用this可以獲取

            
  let args = [...arguments].slice(1) //從 Arguments 對象中取值，取出第二個到最后一個參數   

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

            
  delete context.fn

            
  return result

            
}

            

            7. 

          7. 測試：

            
// 測試一下上面實現的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 的模擬實現

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

            


            
apply() 方法使用一個指定的 this 值和可選的參數數組 來調用一個函數。

            


            
apply 的實現跟 call 類似。

            

            8. 

          8. 實現：

            
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. 

          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 的模擬實現

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

            


            
bind()方法會創建一個新函數，稱為綁定函數。當這個新函數被調用時，bind() 的第一個參數將作為它運行時的 this，之后的一序列參數將會在傳遞的實參前傳入作為它的參數。

            


            
bind是ES5新增的一個方法，不會執行對應的函數，而是返回對綁定函數的引用。

            

            10. 

          10. 實現：

            
Function.prototype.customBind = function () {

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

            
    throw new TypeError('error!')

            
  }

            
  const that = this   // 首先要獲取調用bind的函數，用this獲取并存放在that中

            
  let context = arguments[0] || window

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

            
  return function() {

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

            
  }

            
}

            


            
（四）三者異同
            11. 

          11. 相同：

            
改變函數體內 this 的指向
            12. 

          12. 不同：

            
call、apply的區別：call方法接受的是參數列表，而apply方法接受的是一個參數數組。

            
bind不立即執行。而call或apply會自動執行對應的函數。

            

            13. 

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://m.sdgs6788.com
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          





欧美成人免费观看久久|
香蕉99久久国产综合精品宅男自
|
久久亚洲欧美日本精品|
亚洲一区精品伊人久久伊人|
亚洲天堂久久精品|
国产精品久久久久影视不卡|
久久久久亚洲精品日久生情|
久久人人爽人人爽人人片AV麻豆|
久久国产精品99精品国产987|
欧美日韩精品久久久免费观看|
久久久久国色AV免费看图片|
国产成人综合久久久久久|
精品久久久久久国产|
99久久婷婷国产综合亚洲|
久久久精品人妻一区二区三区四|
伊人久久大香线蕉综合影院首页
|
99久久国产主播综合精品|
国产福利电影一区二区三区久久久久成人精品综合
|
亚洲国产成人久久一区WWW|
亚洲国产成人精品女人久久久|
无码8090精品久久一区|
久久精品国产亚洲av麻豆图片|
精品久久亚洲中文无码|
国产精品久久久久AV福利动漫|
久久夜色tv网站|
性高湖久久久久久久久AAAAA|
怡红院日本一道日本久久|
精品午夜久久福利大片|
久久精品国产一区二区|
国产精品久久久久久五月尺|
久久精品毛片免费观看|
AAA级久久久精品无码区|
久久国内免费视频|
久久精品国产只有精品2020|
久久久受www免费人成|
日韩精品久久久久久免费|
亚洲午夜久久影院|
久久精品国产日本波多野结衣|
九九久久自然熟的香蕉图片|
国产精品热久久毛片|
一本久久a久久精品vr综合|