call蝌箍、apply和bind都是改變函數(shù)運(yùn)行時(shí)this的指向魁巩。
先來弄明白this的指向:
var name = 'mimi', age = 2;
var obj = {
????name: 'momo',
????objAge: this.age,// 這里的this指的是window
????objFun: function(){
????????console.log(this.name+':'+this.age);// 這里的this指的是obj,obj中沒有age屬性族吻,所以輸出是undefined
????}
};
console.log(obj.objAge);// 2
obj.objFun();//?momo:undefined??
call帽借、apply、bind的用法:
var name = 'mimi', age = 2;
var obj = {
? ? name: 'momo',
? ? objAge: this.age,
? ? objFun:function() {
? ? ? ? console.log(this.name+':'+this.age);
????}
};
var obj2 = {
? ? name: 'kaixin',
? ? age: 3
};
obj.objFun.call(obj2);// kaixin:3
obj.objFun.apply(obj2);// kaixin:3
obj.objFun.bind(obj2)();// kaixin:3
以上得出結(jié)論超歌,call砍艾、apply、bind都改變了this的指向巍举,bind返回的是個(gè)新函數(shù)脆荷,必須調(diào)用才會(huì)執(zhí)行。
call懊悯、apply蜓谋、bind參數(shù)的對(duì)比
var name = 'mimi', age = 2;
var obj = {
name: 'momo',
objAge: this.age,
? ? objFun:function(arg1, arg2) {
????????console.log(this.name+':'+this.age+',like:'+arg1','++arg2);
????}
};
var obj2 = {
????name: 'kaixin',
????age: 3
};
obj.objFun.call(obj2,'eat','fight');// kaixin:3,like:eat,fight
obj.objFun.apply(obj2,['eat','fight']);// kaixin:3,like:eat,fight
obj.objFun.bind(obj2,['eat','fight'])();// kaixin:3,like:eat,fight
以上可以看出call、apply炭分、bind的第一個(gè)參數(shù)都是 this 的指向孤澎,后邊的參數(shù)不同。
call可以傳遞過個(gè)參數(shù)欠窒,aplly的參數(shù)必須放在一個(gè)數(shù)組里覆旭,bind沒有限制,可以傳遞多個(gè)參數(shù)岖妄,也可以傳遞數(shù)組型将。
以上三個(gè)方法傳遞的參數(shù)允許是多種類型。