JavaScript彻底搞懂apply和call方法

彻底搞懂JavaScript中的apply和call方法

call和apply都是为了改变某个函数运行的context上下文而存在的，即为了改变函数体内部this的指向。因为JavaScript的函数存在定义上下文和运行时上下文以及上下文是可以改变的概念。

定义

fun.apply(thisArg, [argsArray])

fun.call(thisArg, arg1,arg2, ...)

其中thisArg可以为null或undefined，此时表示全局对象，更详细见MDN:apply()、call()

二者的作用完全一样，只是接受参数的方式不太一样。例如，有一个函数定义如下：

var func1 = function(arg1, arg2){};

可以通过func1.call(this, arg1, arg2);或者func1.apply(this, [arg1, arg2])来调用。其中this是你想指定的上下文，它可以是任意一个JavaScript对象（JavaScript一切皆对象），call需要把参数传递进去，而apply则把参数放在数组里。

因为在JavaScript中，某个函数的参数数量是不固定的，当你的参数明确知道数量时，用call，而不确定的时候用apply，然后把参数push进数组传递进去。当参数数量不确定时，函数内部也可以通过arguments这个数组来遍历所有的参数。

一个例子

在JavaScript OOP中，我们经常会这样定义：

funciton programmer() {
}

programmer.prototype = {
	hobby: 'programming',
	say.function() {
		alert('I love' + this.hobby);
	}
}

var xiaoMing = new programmer();
xiaoMing.say();

此时如果我们有一个设计妹子对象xiaoHua = {hobby: 'designing'};我们不想对它重新定义say方法，那么我们可以通过call或apply使用xiaoMing的say方法：xiaoMing.say.call(xiaoHua)。

由此可看出，call和apply都是为了动态改变this而出现的，当一个object没有某个方法或属性时，但是其他的对象有，则可以借助call或apply来使用其他对象的方法来操作。

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

两者都是把obj(即this)绑定到thisObj，这时候thisObj具备（或继承）了obj的属性和方法

其中比较常见的，通过document.getElementByTagName选择的节点是一种类数组，它不能应用Array下的push，pop等方法。但我们可以通过：

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

Array.prototype.slice.call能所有具有length属性的对象转为数组，这样domNodes就可以应用Array下的所有方法了。

参考资料

• 如何理解和熟练运用js中的call及apply？
• What is the difference between call and apply?