apply和call

Posted on | Edited on | In

在写react的时候经常会用到bind函数指定this对象，除了bind方法，JavaScrtipt动态变换运行时上下文特性,还体现在apply, call两个方法的运用上。call, apply都属于Function.prototype的一个方法，这2个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。

理解apply

首先，apply()方法接收2个参数值，一个是在其中运行函数的作用域，，另一个是参数数组。其中第二个参数可以是Array的实例，也可以是arguments对象，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 下面这个例子中callSum1()在执行sum()函数时传入了this（实际上this为window对象）和arguments对象，而
 * callSum2同样也调用了sum函数，但它传入的是this和一个数组，两个函数都能返回正确的结果
 * @param num1
 * @param num2
 * @returns {*}
 */
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]);  //传入数组
}
alert(callSum1(10,10));  //20
alert(callSum2(10,10));  //20

理解call

call()方法与apply()方法的作用相同，他们的区别仅仅在于接收参数的方式不同，对于call()而言，第一个参数是this没有变，变化得是其余的参数都需要一一列举出来传递而不是传递一个Array。

1
2
3
4
5
6
7
function sum(num1,num2) {
    return num1+num2;
}
function callSum1(num1,num2) {
    return sum.call(this,num1,num2); //传入arguments对象
}
alert(callSum1(10,10));  //20

apply 与 call总结

在使用call()方法的情况下,callsum()方法必须明确的传入每个参数，结果与apply()方法并没有什么不同，至于是使用apply()还是call()方法完全取决于你如何传递参数最方便。如果你打算直接传入arguments对象或者一个数组，那么使用apply()肯定更方便，否则选择call()更合适（在不给函数传递参数的时候，使用哪个方法都无所谓）

事实上，传递参数并非call()与apply()真正的用武之地，他们真正强大地方在于扩展函数的作用域，看下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
var color = 'red';
var o ={
    color:'blue'
}
function sayColor() {
    console.log(this.color);
}
sayColor.call(this);  //red
sayColor.call(window); //red
sayColor.call(o);  //blue
sayColor.apply(this);  //red
sayColor.apply(window);  //red
sayColor.apply(o);  //blue

上面例子中sayColor()作为全局函数挂在window上，传入的this即window，所以输出的都是red，但当传入o时，函数的执行环境就变了，此时函数内部的this指向了o对象，所以输出blue。
使用call()或者apply()扩充作用域最大的好处，就是对象不需要与方法有任何的耦合关系。

bind

ECMAScript5 还定义了一个方法bind()，这个方法会创建一个实例，其this值会被绑定到传给bind函数的值，例如：

1
2
3
4
5
6
7
8
9
var color = 'red';
var o ={
    color:'blue'
}
function sayColor() {
    console.log(this.color);
}
var objSayColor = sayColor.bind(o)
objSayColor();  //blue

在这里sayColor调用bind并传入对象o，并且创建了objSayColor()函数，objSayColor()函数中this值指向o，因此即使在全局作用域中调用该函数，也会看到’blue’。

总结

区分apply,call就一句话：

1
foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)
请我吃辣条~~