一、apply()的作用
它的作用是在指定this值和参数（参数以数组或类数组对象的形式存在）的情况下调用某个函数。其实说白了用它可以绑定一个函数然后在另一个环境中（比如另一个函数中）使用新环境给的参数（指定this值、参数）进行运算；
二、apply()的语法及与call()的区别
（一）、apply()的用法如下: fun.apply(thisArg,[argsArray])
-
thisArg
括号里的thisArg表示在fun函数运行时指定的this值。需要注意的是指定的this值并不是该函数执行时真正的this值，若这个函数处于非严格模式下，则当thisArg为null或者undefined时，则会指向全局对象（在浏览器中也就是window），同时值为原始值（字符串 、数值、布尔值 ）的this会指向该原始值的自动包装对象。 -
argsArray
括号中的argsArray表示一个数值或者类数组对象，其中的数组元素将作为单独的参数传给fun函数，如果该参数的值为null或者undefined时，则表示不需要传递任何参数。 -
注意apply前面是将要调用的函数名而不是函数！！！
用法举例一：
function sum(a,b) {
return a+b;
}
function add(x,y) {
return sum.apply(this,[x,y])
}
console.log(add(2,5))
上述运行结果将是7.很明显我们并未直接在add函数中定义它的结果是返回它的两个形参之和，而是通过在add的环境下（指定了this值及2，5参数）调用sum函数来进行运算。
用法举例二：
var jubuColor={"color":"yellow"};
quanjuColor={"color":"red"};
window.color="green";
function showColor() {
console.log(this.color);
}
showColor.apply(jubuColor);
showColor.apply(quanjuColor);
showColor.apply(window);
showColor.apply(this);
上述运行结果
Paste_Image.png
由此可以看出apply可以改变或者说扩展函数的作用域。
用法举例三：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>apply</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<script>
var age=25;
function people (name,sex) {
console.log(name+" "+sex+" "+this.age);
}
var licai={"sex":"M","age":"24"};
people ("zhang","F");
people.apply(licai,["xiaolizi","girl"]);
</script>
</body>
</html>
运行结果
people ("zhang","F") 这句的运行结果中age是25，原因是函数里面无age值，只能去外面找，而外面声明了变量 var age=25;因此为25；
但是people.apply(licai,["xiaolizi","girl"]) 这句的运行结果中age是24，原因是：
Paste_Image.png
用法举例四：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
/*定义一个人的基本信息*/
function Person(name,age) {
this.name=name; this.age=age;
}
/*定义一个人的更多信息*/
function personMoreInfo(name,age,sex) {
Person.apply(this,arguments);
this.sex=sex;
}
var coder =new personMoreInfo("licai","25","M");
console.log("他的名字是"+ coder.name+" "+"他的年龄是"+coder.age+" "+ "他的性别是"+coder.sex )
</script>
上述的Person.apply(this,arguments)改写成 Person.apply(this,[name,age]) 同样成立。
Paste_Image.png
（二）与call（）的区别
其与call几乎完全相同，唯一区别在于语法上：
Paste_Image.png
也就是call( 第一个参数，第二个参数)，call的第二个参数是一个参数列表，而不是数组或者类数组对象，其实上面的例子中的 Person.apply(this,[name,age])
可改成 Person.call(this,name,age) 也是一样的。
Paste_Image.png
注：如果apply的第二个参数不是数组或者类数组对象就会报Uncaught TypeError: CreateListFromArrayLike called on non-object 错误！！！
Paste_Image.png
（三）与bind()的区别
提到了apply和call，那必然还要提到bind。其实call和apply都是对函数的直接调用，而bind方法返回的仍然是一个函数，因此需要执行该函数时后面还需要()来进行调用才可以。对于bind，如果有参数需要传入的话有两种写法，一种是像call那样传参（比如Person.bind(this,name,age)() ），另一种是Person.bind(this)(name,age)。
四、apply（）的常见巧妙用法
（一）、寻找一个数组中的最大或最小值
我们知道Math.max()或者Math.min()可以寻找最大或最小值，但是()里不支持数组（见下图）
Paste_Image.png
当然也许我们会想到以下方法：
function getMin1(arr) {
var minArr=arr[0];
for (var i=0;i<arr.length;i++){
if (minArr>arr[i]){
minArr=arr[i]
}
}
return minArr
}
或者
function getMin2(arr) {
var minArr=arr[0];
for (var i=0;i<arr.length;i++){
minArr=Math.min(minArr,arr[i])
}
return minArr
}
其实使用apply就非常简单高效了：
function getMin3(arr) {
return Math.min.apply(null,arr)
}
（二）、将一个数组push到另一个数组中
我们不能直接arr1.push(arr2),这样的push结果如下;
Paste_Image.png
因此我们需要采用函数的方法：
function pushArr(arr1,arr2) {
for (var i=0;i<arr2.length;i++){
arr1.push(arr2[i])
}
// console.log(arr1);
return arr1
}
其实使用apply方法能够更简单高效的完成：
function pushArr2(arr1,arr2) {
return Array.prototype.push.apply(arr1,arr2)
}
参考：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
http://blog.csdn.net/business122/article/details/8000676
http://www.cnblogs.com/delin/archive/2010/06/17/1759695.html
相关练习：this、call、apply实例解析
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论