bind方法,顧名思義,就是綁定的意思,到底是怎么綁定然后怎么用呢,下面就來說說我對這個方法的理解。
語法
fun.bind(this,arg1,arg2,...)
bind()方法會創建一個新的函數,稱為綁定函數,fun方法在this環境下調用
該方法可傳入兩個參數,第一個參數作為this,第二個及以后的參數則作為函數的參數調用
實例
1.創建綁定函數
1 this.a = 1; 2 var module = { 3 a : 2, 4 getA:function() { 5 return this.a; 6 } 7 }; 8 module.getA();//2 9 10 var getA1 = module.getA; 11 // getA在外部調用,此時的this指向了全局對象 12 getA1();//1 13 14 // 再把getA1方法綁定到module環境上 15 var getA2 = getA1.bind(module); 16 getA2();
從上面的例子可以看出,為什么要創建綁定函數,就是當我們調用某些函數的時候是要在特定環境下才能調用到,所以我們就要把函數放在特定環境下,就是使用bind把函數綁定到特定的所需的環境下。
2.讓函數擁有預設的參數
使用bind()方法使函數擁有預設的初始參數,這些參數會排在最前面,傳給綁定函數的參數會跟在它們后面
1 function list(){ 2 // 讓類數組arguments擁有數組的方法slice,這個函數實現了簡單把類數組轉換成數組 3 return Array.prototype.slice.call(arguments); 4 } 5 6 list(1,2,3);//[1,2,3] 7 8 //給list綁定一個預設參數4 9 var list1 = list.bind(undefined,4); 10 11 list1();//[4] 12 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 function fun1() { 2 var slice = Array.prototype.slice; 3 return slice.apply(arguments); 4 } 5 6 fun1(1,2,3);//[1,2,3]
第二種方法是使用call方法和bind方法一起使用
function fun2() { var unboundSlice = Array.prototype.slice; // 把函數的call方法綁定在數組slice方法上,之后再給call方法傳遞參數 var slice = Function.prototype.call.bind(unboundSlice); return slice(arguments); } fun2(1,2,3);//[1,2,3]
關於bind方法還是會有一些比較難理解的地方,所以還是要仔細琢磨。
希望大家多多指正~