JavaScript中apply、call与bind方法的区别及应用

apply与call方法概述

在JavaScript中，每个函数都内置了两个非继承自原型的独特方法：apply()和call()。

这两个方法的核心功能一致，即允许开发者在指定的作用域环境中执行函数。

它们在处理参数时存在显著差异：apply()方法接收两个参数，第一个参数指定函数运行时this指向的对象，第二个参数则是一个包含所有传入参数的数组。

call()方法的第一个参数与apply()相同，用于指定this指向，但后续传递给函数的参数必须以独立的列表形式逐个列出，而非数组。

示例1：作用域切换

示例1展示了这两个方法的具体用法。

 
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
} 
HelloName.call(window); //huo .call(this);
HelloName.call(myObject);

运行上述代码后，控制台输出结果如下：

Hello diz song glad to meet you!

Hello my Object glad to meet you!

示例2：参数传递差异

示例2进一步演示了参数传递的区别。

 
function sum(num1, num2) {
return num1 + num2;
} 
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30

分析：在示例1中，我们可以看出apply()和call()的主要价值在于能够扩展函数运行的作用域。如果采用传统方式实现相同效果，可以参考以下代码：

 
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
} 
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!

观察上述代码中红色的部分，可以发现，若要使HelloName()函数的作用域绑定到对象myObject上，我们需要动态创建myObject的一个名为HelloName的属性，该属性作为指针指向HelloName()函数。这样，当调用myObject.HelloName()时，函数内部的this变量便指向myObject，从而可以访问该对象的其他公共属性。

通过示例2的分析，我们明确了call()和apply()函数的实际应用场景。在实际项目开发中，应根据具体需求灵活选择和使用这些方法。

函数内定义函数的this指向

一个小问题：再来看看在函数内部定义另一个函数时，this变量的指向情况。

 
function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
} 
temp2();
} 
var Obj = {};
temp1.call(Obj); //运行结果见上面绿色的注释！！！！

执行结果与以下代码相同：

 
function temp1() {
console.log(this);
temp2();
} 
function temp2() {
console.log(this);
} 
var Obj = {};
temp1.call(Obj);

bind方法详解

支持此方法的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它是属于ECMAScript5的方法。直接看例子：

 
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
} 
var OSayColor = sayColor.bind(o);
OSayColor(); //blue

这里，sayColor()调用bind()方法，并传入o对象，返回了OSayColor()函数，在OSayColor()中，this的值就为o对象。