JavaScript 中函数方法对应2个方法call、apply详解

在很多前端面试题中都会出现 JavaScript 函数方法 call() 和 apply() 相关题目，下面就整理与之相关的一些知识点。

一、主要作用

每个函数都会有这2个非继承的方法：call()、apply()。主要作用是：指定函数内 this 指向，使其在特定的作用域调用函数。

二、实例讲解

(1) 默认调用

function showThis() {
  console.log("this --> " + this); 
}

showThis();  		// this --> [object Window]
showThis.call();  	// this --> [object Window]
showThis.apply();  	// this --> [object Window]

定义好函数 showThis 后，既可以通过函数对象调用这两个方法，在没有任何参数的情况下，函数内部的 this 指向的是 Window 对象，如上面的代码输出的结果皆为："this --> [object Window]"。

(2) 传入参数，改变this指向

var color = {
	textColor: "#FF0000",
	backgroundColor: "#6666FF",
}

function displayColor () {
	console.info(this);
	console.info(this.textColor);
	console.info(this.backgroundColor);
}

displayColor.call(color); 
displayColor.apply(color); 

此时的 this 指向的是 color 对象，因此输出的结果如下图所示：

（3）apply 和 call 的区别

apply 和call方法的作用基本相同，主要的区别是：接收参数的方式不同。

两者接受的第一个参数是相同的，均为this指向。call 从第二参数开始，接受的是多个参数，并用逗号分隔，而 apply 的第二个参数为 数组 或 arguments

function myToString(name, age) {
	console.info(this);
	console.info("name = " + name + ", age = " + age);
}

myToString.call(null, "林黛玉", 20);
myToString.apply(null, ["林黛玉", 20]);

function demo(name, age) {
	myToString.call(null, name, age);
	myToString.apply(null, arguments);
	myToString.apply(null, [name, age]);
}

demo("薛宝钗", 22);

三、面试题

（1）下列程序运行结果是什么？

(function fun() {
	console.log(this);
})(null);

(function fun() {
	console.log(this);
}).apply(null);

(function fun() {
	console.log(this);
}).call(null);

(function fun() {
	console.log(this);
}).call({});

A Window Window Window Window

B null Window Window Window

C Window Window Window null

D Window Window Window {}

答案：D

解析：当函数调用call、apply方法时，传入null，this的指向默认为 Window

（2）请说一下JavaScript 中 call 和 apply 的区别

call 和 apply的作用相同，都是为了指定函数内 this 指向，使其在特定的作用域运行。

相同点：

两者接受的第一个参数是相同的，均为this指向。

不同点：

1. call 从第二参数开始，接受的是多个参数，并用逗号分隔，
2. apply 的第二个参数为 数组 或 arguments