首先申明,本文是来自阮一峰前辈的文章,还是决定自己在敲一遍,在这里我想不用放大师的链接了(想必太多的人知道了);
apply和call的作用
在javascript中,call和apply都是为了改变某个函数运行的上下文(context)而存在的,换句话说就是改变函数体内部的this指向。
javascript的一大特点就是,函数存在【定义时上下文】和【运行时上下文】以及【上下文是可以改变的】这样的概念。先来个案例
function test(){}
fruits.prototype = {
color: "red",
say: function(){
console.log("color is"+this.color);
}
}
var apple = new fruits;
apple.say(); //color is red
如果现在有个对象banana = {color: “yellow”},我们不想重新定义say方法,那么我们可以通过call或者apply用apple的say方法
banana = {
color: "yellow"
}
apple.say.call(banana);//color is yellow;
apple.say.apply(banana); //color is yellow;
所以,可以看出call和apply是为了动态的改变this而出现的,当一个object没有某个方法,而其他的有,可以借助call挥着apply用其他对象的方法来操作。
apply和call的区别
对于两者而言,作用完全一样,只是接受的参数不一样,比如:
var func = function(arg1, arg2){
}
可以通过以下方法调用
func.call(this,arg1, arg2);
func.apply(this,[arg1,arg2]);
其中this是你想指定的上下文,它可以是任何一个javascript对象(js中一切皆对象),call需要把参数按顺序传进去,而apply则是把参数放在数组了,在javascript中,某个函数的参数数量是不固定的,因此要说使用条件的话,当你的参数是明确知道的数量时用call,不确定的时候用apply,然后把参数push进数组传递进去,当参数不确定时,函数内部也可以通过arguments这个数组来遍历所有的参数。
call apply的一些使用技巧
1:数组之间追加:
arr1 = ['10','2'];
arr2 = ['5','89'];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);//['10','2','5','89']
获取数中最大值个最小值
var numbers = [5, 458 , 120 , -215 ];
var maxNumber = Math.max.apply(Math,numbers);
var maxNumber = Math.max.call(Math,5,458,120,-215);
console.log(maxNumber);//458
验证对象是否为数组
function IsArray(){
return Object.prototype.toString.call(obj)===='[object Array]';
}
伪数组转换成真正的数组
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
解释:
在JavaScript在存在一种伪数组,比较特别的是 arguments对象,还有想document.getElementsByTagName,document.childNodes之类的。它们返回的是NodeList对象都属于伪数组对象,不能应用Array的push,pop等方法,但是我们能使用Array.prototype.slice.call转换成真正的数组带有length属性的对象,就可以使用Array的方法了。
(感觉还是没有彻底的理解,后续再慢慢理解啦)