JS里call和apply的作用和区别

区别

–	call()	apply()
作用	call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。	apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数。
语法	fun.call(thisArg[, arg1[, arg2[, …]]])	fun.apply(thisArg, [argsArray])
参数	thisArg 在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。 arg1, arg2, … 指定的参数列表。	thisArg 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动指向全局对象（浏览器中就是window对象），同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。 argsArray 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。如果该参数的值为null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。
返回值	返回结果包括指定的this值和参数。	返回结果包括指定的this值和参数。
描述	可以让call()中的对象调用当前对象所拥有的function。你可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。	在调用一个存在的函数时，你可以为其指定一个 this 对象。 this 指当前对象，也就是正在调用这个函数的对象。使用 apply，你可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。

apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表（原文：a named set of parameters）。apply 可以使用数组字面量（array literal），如 fun.apply(this, [‘eat’, ‘bananas’])，或数组对象，如 fun.apply(this, new Array(‘eat’, ‘bananas’))。

你也可以使用 arguments 对象作为 argsArray 参数。 arguments 是一个函数的局部变量。它可以被用作被调用对象的所有未指定的参数。这样，你在使用apply函数的时候就不需要知道被调用对象的所有参数。你可以使用arguments来把所有的参数传递给被调用对象。被调用对象接下来就负责处理这些参数。

说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

使用案例

案例1：基本使用

function add(a,b) {
    alert(a+b);
}
function reduce(a,b) {
    alert(a-b);
}
add.call(reduce,1,3) //将add方法运用到reduce,结果为4

案例2：基本使用

<input type="text" id="myText" value="input text">
<script>
function Obj(){this.value="对象！";}
var value="global 变量";
function Fun1(){alert(this.value);}

 window.Fun1(); //global 变量
 Fun1.call(window); //global 变量
 Fun1.call(document.getElementById('myText')); //input text
 Fun1.call(new Obj()); //对象！
</script>

案例3：改变this指向

call函数和apply方法的第一个参数都是要传入给当前对象的对象，及函数内部的this。后面的参数都是传递给当前对象的参数。

<script>
var func=new function(){this.a="func"}
var myfunc=function(x){
var a="myfunc";
 alert(this.a);
 alert(x);
 }
 myfunc.call(func,"var");
</script>

可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

案例4：this

function b(){
    alert(this)
}

b(); //window
b.call(); //window
b.call("a",2,3); //a

案例5：this

function Animal() {
this.name=”animal”;
this.showName=function() {
        alert(this.name)
    }
}

function Cat() {
this.name=”cat”;
}

var animal = new Animal();
var cat = new Cat();
animal.showName(); //结果为animal
animal.showName.call(cat); //原本cat没有showName方法，但是通过call方法将animal的showName方法应用到cat上,因此结果为cat

案例6：实现继承

function Animal(name) {
this.name=name;
this.showName=function() {
        alert(this.name)
    }
}

function Cat(name) {
    Animal.call(this,name); //将Animal应用到Cat上，因此Cat拥有了Animal的所有属性和方法
}

var cat = new Cat(“Black Cat”);
cat.showName(); //浏览器弹出Black Cat

秒客网