JavaScript 中 apply(), call(), bind()的用法和区别

定义

首先ECMAScript 中的函数是对象，因此有属性和方法。每个函数都有两个属性：length
和 prototype。而apply(), call(), bind() 就是每个函数都有的三个方法。apply()和 call()。这两个方法都会以指定的 this 值来调用函数，即会设
置调用函数时函数体内 this 对象的值。其中bind()是在ECMAScript 5 出于同样的目的定义了的一个新方法。

apply()

apply()方法接收两个参数：函数内 this 的值和一个参数数
组。第二个参数可以是 Array 的实例，但也可以是 arguments 对象。

function sum(num1, num2) { 
	return num1 + num2; 
} 
function callSum1(num1, num2) { 
  	return sum.apply(this, arguments); // 传入 arguments 对象
} 
function callSum2(num1, num2) { 
 	return sum.apply(this, [num1, num2]); // 传入数组
} 
console.log(callSum1(10, 10)); // 20 
console.log(callSum2(10, 10)); // 20

在这个例子中，callSum1()会调用 sum()函数，将 this 作为函数体内的 this 值（这里等于window，因为是在全局作用域中调用的）传入，同时还传入了 arguments 对象。callSum2()也会调sum()函数，但会传入参数的数组。这两个函数都会执行并返回正确的结果。

call()

call()方法与 apply()的作用一样，只是传参的形式不同。第一个参数跟 apply()一样，也是 this值，而剩下的要传给被调用函数的参数则是逐个传递的。换句话说，通过 call()向函数传参时，必须将参数一个一个地列出来，比如：

function sum(num1, num2) { 
 	return num1 + num2; 
} 
function callSum(num1, num2) { 
 	return sum.call(this, num1, num2); 
} 
console.log(callSum(10, 10)); // 20

这里的 callSum()函数必须逐个地把参数传给 call()方法。结果跟 apply()的例子一样。到底是使用 apply()还是 call()，完全取决于怎么给要调用的函数传参更方便。如果想直接传 arguments对象或者一个数组，那就用 apply()；否则，就用 call()。当然，如果不用给被调用的函数传参，则使用哪个方法都一样。apply()和 call()真正强大的地方并不是给函数传参，而是控制函数调用上下文即函数体内 this值的能力。考虑下面的例子：

window.color = 'red'; 
let o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); 
} 
sayColor(); // red 
sayColor.call(this); // red 
sayColor.call(window); // red 
sayColor.call(o); // blue

这个例子是在之前那个关于 this 对象的例子基础上修改而成的。同样，sayColor()是一个全局函数，如果在全局作用域中调用它，那么会显示"red"。这是因为 this.color 会求值为 window.color。如果在全局作用域中显式调用 sayColor.call(this)或者 sayColor.call(window)，则同样都会显示"red"。而在使用 sayColor.call(o)把函数的执行上下文即 this 切换为对象 o 之后，结果就变成了显示"blue"了。使用 call()或 apply()的好处是可以将任意对象设置为任意函数的作用域，这样对象可以不用关心方法。

bind()

ECMAScript 5 出于同样的目的定义了一个新方法：bind()。bind()方法会创建一个新的函数实例，其 this 值会被绑定到传给 bind()的对象。比如：

var o = { 
 color: 'blue' 
}; 
function sayColor() { 
 console.log(this.color); 
} 
let objectSayColor = sayColor.bind(o); 
objectSayColor(); // blue

这里，在 sayColor()上调用 bind()并传入对象 o 创建了一个新函objectSayColor()。objectSayColor()中的 this 值被设置为 o，因此直接调用这个函数，即使是在全局作用域中调用，也会返回字符串"blue"。

[1]: JavaScrip 高级程序设计第四版