浅析JavaScript的call和apply方法

发表于 | 分类于 |

我想大家在学习 JS 的过程中，经常会看别人写的代码。我在看别人写的代码中，经常会看到一些 JS 的 call 和 apply 方法。但是对它们的作用，都一直云里雾里，没有认真的去学习。今天，我们就来学习 JS 的 call 和 apply 方法。

首先，在 JS 中，函数是对象，既然是对象，那么就有自己的属性和方法。而 call()和 apply()都是预定义的函数方法。它们两个方法都可以用来调用函数，而且第一个参数都必须是对象本身。并且可以用当前对象代替传入对象来调用一个方法。
如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var myObject = {};
function myFun(a, b){
	return a * b;
}
myFun.call(myObject, 2, 5);		//返回20
---
function myFun1(a, b){
	return a * b;
}
myArr = [2,5];
myFun1.apply(myObject, myArr);	//返回20

这两个方法都使用对象作为本身的第一个参数，区别在于传入的参数：
call()是将参数依次传入
apply()是将参数作为一个数组传入的

需要注意的是：

严格模式下，调用函数时第一个参数会成为this的值，即使该参数不是一个对象。

非严格模式时，如果第一个参数值为null或undefined，它将用全局对象代替。

下面来说明传入一个对象栗子：

1
2
3
4
5
6
7
8
function add(a, b) {
	return a + b;
}
function sub(a, b) {
	return a - b;
}
add.call(sub, 5, 2);
//在这里，add()代替了sub(),所以返回7

可能现在看起来，和直接调用 add()都一样。但是在一下情况就很有用了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function dog() {
	this.name = "dog";
	this.type = function () {
		return "animal";
	};
}

function cat() {
	this.name = "cat";
}

var dog = new dog();
var cat = new cat();

dog.type.call(cat); // animal

注意:call 和 apply 是将 dog 的方法放到 cat 上执行，原来 cat 是没有 type 这个该方法的，现在将 dog 的 type 方法放到 cat 上来执行，所以返回的结果是“animal”。

怎么样，觉得有意思了吧。而且还可以实现继承：

1
2
3
4
5
6
7
8
9
10
11
12
function animal() {
	this.type = function (nema) {
		return "animal";
	};
}

function dog() {
	animal.call(this);
}

var wangcai = new dog();
wangcai.type(); //animal

上面的代码就展示了 dog 是如何继承 animal 的。animal.call(this) 的 意思就是使用 animal 对象代替 this 对象，那么 dog 中不就有 animal 的所有属性和方法了吗，wangcai 对象就能够直接调用 animal 的方法以及属性了，执行结果就是：animal 了。

apply 和 call 的使用方法几乎一样，只需要注意参入的参数。

[越努力，越幸运！]