总是对call和apply方法使用存在迷惑,特此记录一下
一句话理解这两个方法:
call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作
举个栗子:
我们都知道在函数中有一个伪数组 arguments ,其结构像数组,但是没有数组的(join,slice)等方法,因此我们用call借用数组中的这些方法操作 arguments
function fn(){ console.log(Array.prototype.join.call(arguments,'-')); } fn('abc','bdc','fgv');
输出:·abc-bdc-fgv·
再举一个栗子:
通过document.getElementsByTagName选择的dom 节点是一种类似array的array,它不能应用Array下的push,pop等方法
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
到此我们大概可以了解call和apply的使用场景了
接下来具体介绍一下这两个方法
在下面代码中,我们定义了猫和狗两个类,其各自有自己的属性(name、color),但是狗没有eat和say这两个方法,因此可以通过call调用猫 ,cat的say方法中this指向会指向dog
function cat(obj){
this.color = obj.color;
this.name = obj.name;
}
cat.prototype = {
food : 'fish',
say : function (){
console.log('喵~ , 我的名字叫'+this.name);
},
eat : function(food1,food2){
console.log('我是'+this.name+',我吃'+ food1 + food2);
}
}
var xiaobai = new cat({name:'xiaobai',color:'white'});
function dog(obj){
this.color = obj.color;
this.name = obj.name;
}
dog.prototype = {
food : 'bone'
}
var xiaohei = new dog({name:'xiaohei',color:'black'});
xiaobai.say.call(xiaohei); //这里调用猫的say方法,this指向 xiaohei
喵~ , 我的名字叫xiaohei
xiaobai.eat.apply(xiaohei,['骨头','肉']); //apply可以跟多个参数,以数组的形式
我是xiaohei,我吃骨头肉
引用网友的一段话,帮助记忆这两个方法
猫吃鱼,狗吃肉,奥特曼打小怪兽。
有天狗想吃鱼了
猫.吃鱼.call(狗,鱼)
狗就吃到鱼了
猫成精了,想打怪兽
奥特曼.打小怪兽.call(猫,小怪兽)