1. 程式人生 > >javascript方法--bind()

javascript方法--bind()

javascript方法--bind()

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()方法使函式擁有預設的初始引數,這些引數會排在最前面,傳給繫結函式的引數會跟在它們後面

 

    // 讓類陣列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方法

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);
}

轉載:

https://www.cnblogs.com/xxxxBW/p/4914567.html

https://juejin.im/post/5ad55c036fb9a028c06b4ff0