apply() / call() 概念
在特定的作用域中调用函数,实际上等于设置函数体内this对象的值 ---《js高级程序设计》
直白来讲,就是
调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A, arguments);即A对象应用B对象的方法。
这两个方法的作用相同,区别在于传入的第二个参数不同
apply() 接收两个参数:一个是在其中运行函数的作用域(this指向),另一个是参数数组(Array实例 / arguments对象)
call() 第一个参数与apply相同(this指向),其余传递给函数的参数逐个列举出来
B.apply(A, arguments);
B.call(A, args1,args2);
理解和应用
理解和运用这个方法主要是知道函数中this指向。
我们通常使用的函数有两种,一种是作为某个对象的方法,一种是作为独立的函数
当作为对象的方法时,函数中的this指向的是调用它的对象;而如果是一个独立函数,我们通常不会在其中使用this。
这也是有时找不到是哪个对象调用函数,不知该如何使用apply的问题所在,因此,不要太执着于找this指向。那怎么使用apply呢
第一种就是函数作为某个对象的方法,但是却不被这个对象调用。
Array.prototype.slice.call(arguments)
var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2); // 6 实现两个数组的合并并返回数组长度
var array=[1,2,4,2,5]
Math.max.apply(null,array) //5
这时this并不是指向Array,只是需要借用Array类的方法,所以使用了call
第二种就是声明了一个带有this的函数,根据传入不同的对象做出操作(扩充函数的作用域)
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three' };
function changeColor(){
console.log(this.number);
}
changeColor.apply(); //one (默认传参)
changeColor.apply(window); //one
changeColor.apply(document); //two
changeColor.apply(this); //one
changeColor.apply(s1); //three
扩充函数的作用域是这两个方法最大的优势,好处是对象和方法不需要有耦合关系(在对象中先声明函数,再用对象调用函数)
这两个方法最常见的应用是构造函数属性的继承
function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}
function Cat(name){
Animal.apply(this,[name]);
}
var cat = new Cat("咕咕");
cat.showName();
/*call的用法*/
Animal.call(this,name);
总结:
- apply,call方法实现相同的功能:在特定的作用域中调用函数
- 区别:是第二个参数不同,apply传入数组参数(Array实例 / argements伪数组),call第二个之后的参数要一一列举
- 应用:使用Array或Math原生方法、继承