bind與call的區別

bind與call很類似,，例如，可接受的參數都分爲兩部分，且第一個參數都是做爲執行時函數上下文中的this的對象。

不一樣點有兩個：

①bind的返回值是函數

//都是將obj做爲上下文的this

function func(name,id) {
    console.log(name,id,this);
}
var obj = "Look here";

//什麼也不加
func("    ","-->");

//使用bind是 返回改變上下文this後的函數
var a = func.bind(obj, "bind", "-->");
a();
//使用call是 改變上下文this並執行函數
var b = func.call(obj, "call", "-->");

結果：

②後面的參數的使用也有區別

function f(a,b,c){
    console.log(a,b,c);
}

var f_Extend = f.bind(null,"extend_A")

f("A","B","C")  //這裏會輸出--> A B C

f_Extend("A","B","C")  //這裏會輸出--> extend_A A B

f_Extend("B","C")  //這裏會輸出--> extend_A B C

f.call(null,"extend_A") //這裏會輸出--> extend_A undefined undefined

這個區別不是很好理解

call 是 把第二個及之後的參數做爲f方法的實參傳進去

而bind 雖然說也是獲取第二個及之後的參數用於以後方法的執行，可是f_Extend中傳入的實參則是在bind中傳入參數的基礎上日後排的。

//這句代碼至關於如下的操做
var f_Extend = f.bind(null,"extend_A")

//↓↓↓

var f_Extend = function(b,c){
    return f.call(null,"extend_A",b,c);
}

舉一個應用場景：例如如今有一個方法 根據不一樣的文件類型進行相應的處理，經過bind 就能夠建立出簡化版的處理方法

function FileDealFunc(type,url,callback){
    if(type=="txt"){...}
    else if(type=="xml"){...}
    .....
}

var TxtDealFunc = FileDealFunc.bind(this,"txt");

//這樣使用的時候更方便一些
FileDealFunc("txt",XXURL,func);  //原來
TxtDealFunc(XXURL,func); //如今

 

---

如下是兼容處理

if (!Function.prototype.bind) {
    Function.prototype.bind = function(obj) {
        var _self = this
            ,args = arguments;
        return function() {
            _self.apply(obj, Array.prototype.slice.call(args, 1));
        }
    }
}