JavaScript中apply()与call()的区别及bind()用法详解

本文通过具体示例，深入解析JavaScript中apply()和call()两个方法的区别及其实际应用。

apply与call的基本区别

在JavaScript中，每个函数都内置了两个非继承自原型链的方法：apply()和call()。这两个方法的核心作用是在特定的作用域中调用函数，从而重新设定函数内部this关键字的指向值。

两者的主要区别在于接收参数的形式不同。对于apply()而言，其第一个参数指定了函数运行的作用域（即this的值），而第二个参数必须是一个数组实例或arguments对象；相比之下，的第一个参数同样指定this的值，但后续的所有参数都直接逐个传递给被调用的函数。

当需要传入的参数已经是数组形式或arguments对象时，使用会显得更加便捷。

从代码示例可以看出，apply()和call()均支持传递参数。更为关键的是，它们能够扩展函数运行的作用域，改变函数内部this的指向：

var obj = {color:'red'};
window.color = 'blue';
function getcolor(){
  console.log(this.color)
};
getcolor.apply(obj);    //red
getcolor.apply(window);  //blue
getcolor.apply(this);   //blue

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

一个典型的应用场景是利用接收数组来简化参数传递。此时，的第一个参数可以设置为null或空字符串，因为此时我们主要关注的是利用其处理数组参数的特性。

var values = [1,2,3,4,5,4,3,2,1];
var max = Math.max.apply(Math,values);
console.log(max);     //5

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

这实际上是利用apply()接收数组，从而方便了传参。而apply的第一个参数改为null或者空字符串均可。

此外，JavaScript中还提供了bind()方法，该方法会创建一个函数的实例，其内部的this值被固定指向传给bind()的参数值：

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

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行结果如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript常用函数技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述的关于apply、call及bind方法的解析对大家理解JavaScript程序设计有所帮助。