天天看點

call(),apply(),bind()的含義和差別

var name = '小王', age=1;
var obj = {
    name: '老王',
    age: 30,
    objAge: this.age, //this指向window
    goFun: function () {
        // this指向obj
        console.log('我是' + this.name + ',我' + this.age + '歲了');
    }
};

obj.objAge; //1
obj.goFun(); //我是老王,我30歲了

           

1、call()、apply()、bind() 都是用來重定義 this 這個對象的!

var name = '小王', age=1;
var obj = {
    name: '老王',
    age: 30,
    objAge: this.age,
    goFun: function () {
        console.log('我是' + this.name + ',我' + this.age + '歲了');
    }
};
var db = {
    name: '小米',
    age: 40
};
obj.goFun.call(db); //我是小米,我40歲了
obj.goFun.apply(db); //我是小米,我40歲了
obj.goFun.bind(db)(); //我是小米,我40歲了
           

this指向了參數db(如果不加參數,則指向window)

以上出了 bind 方法後面多了個 () 外 ,結果傳回都一緻!

由此得出結論,bind 傳回的是一個新的函數,你必須調用它才會被執行。

2、對比call 、bind 、 apply 傳參情況下

var name = '小王', age=1;
var obj = {
    name: '老王',
    age: 30,
    objAge: this.age,
    goFun: function (val1,val2) {
        console.log('我是' + this.name + ',我' + this.age + '歲了,從' + val1 + '去' +val2);
    }
};
var db = {
    name: '小米',
    age: 40
};
obj.goFun.call(db,'成都','上海'); //我是小米,我40歲了,從成都去上海
obj.goFun.apply(db,['成都','上海']); //我是小米,我40歲了,從成都去上海
obj.goFun.bind(db,'成都','上海')(); //我是小米,我40歲了,從成都去上海
           

微妙的差距!

call 、bind 、 apply 這三個函數的第一個參數都是 this 的指向對象;

第二個參數差别就來了:

call 的參數是直接放進去的,第二第三第 n 個參數全都用逗号分隔;

apply 的所有參數都必須放在一個數組裡面傳進去;

bind 除了傳回是函數以外,它 的參數和 call 一樣。

當然,三者的參數不限定是 string 類型,允許是各種類型,包括函數 、 object 等等!