bind()使用方法


bind方法,顧名思義,就是綁定的意思,到底是怎么綁定然后怎么用呢,下面就來說說我對這個方法的理解。

 

語法

fun.bind(this,arg1,arg2,...)

bind()方法會創建一個新的函數,稱為綁定函數,fun方法在this環境下調用

該方法可傳入兩個參數,第一個參數作為this,第二個及以后的參數則作為函數的參數調用

 

實例 

1.創建綁定函數

  1. 1 this.a = 1;
  2. 2 var module = {
  3. 3 a : 2,
  4. 4 getA:function() {
  5. 5 return this.a;
  6. 6 }
  7. 7 };
  8. 8 module.getA();//2
  9. 9
  10. 10 var getA1 = module.getA;
  11. 11 // getA在外部調用,此時的this指向了全局對象
  12. 12 getA1();//1
  13. 13
  14. 14 // 再把getA1方法綁定到module環境上
  15. 15 var getA2 = getA1.bind(module);
  16. 16 getA2();

從上面的例子可以看出,為什么要創建綁定函數,就是當我們調用某些函數的時候是要在特定環境下才能調用到,所以我們就要把函數放在特定環境下,就是使用bind把函數綁定到特定的所需的環境下。

 

 

2.讓函數擁有預設的參數

使用bind()方法使函數擁有預設的初始參數,這些參數會排在最前面,傳給綁定函數的參數會跟在它們后面

  1. 1 function list(){
  2. 2 // 讓類數組arguments擁有數組的方法slice,這個函數實現了簡單把類數組轉換成數組
  3. 3 return Array.prototype.slice.call(arguments); 
  4. 4 }
  5. 5
  6. 6 list(1,2,3);//[1,2,3]
  7. 7
  8. 8 //給list綁定一個預設參數4
  9. 9 var list1 = list.bind(undefined,4);
  10. 10
  11. 11 list1();//[4]
  12. 12
  13. 13 list1(1,2,3);//[4,1,2,3]

3.setTimeout的使用

正常情況下,調用setTimeout的時候this會指向全局對象,但是使用類的方法時我們需要指向類的實例,所以要把this,綁定要回調函數方便繼續使用實例

  1. function Fun1() {
  2. this.name = 1;
  3. }
  4.  Fun1.prototype.fun2 = function() {
  5.   window.setTimeout(this.fun3.bind(this), 1000);
  6.  }
  7.  Fun1.prototype.fun3 = function(){
  8.   console.log('name:'+this.name);//name:1
  9.  }
  10.   var fun = new Fun1();
  11.  fun.fun2();

4.快捷方法--把類數組轉換成數組

第一種方法是使用apply方法

  1.   1 function fun1() {
  2.   2 var slice = Array.prototype.slice;
  3.   3 return slice.apply(arguments); 
  4. 4 }
  5.   5
  6.   6 fun1(1,2,3);//[1,2,3]

第二種方法是使用call方法和bind方法一起使用

  1.   function fun2() {
  2.   var unboundSlice = Array.prototype.slice;
  3.   // 把函數的call方法綁定在數組slice方法上,之后再給call方法傳遞參數
  4.   var slice = Function.prototype.call.bind(unboundSlice);
  5.   return slice(arguments);
  6.  }
  7.   
  8.  fun2( 1,2,3);//[1,2,3]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM