call()与apply()的用法与区别

ECMAScript中的函数是对象，因此函数也有属性与方法。每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this的对象的值。

一、apply()方法

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

         function sum(num1,num2){
             return num1 + num2;
         }

         function callsum1(num1,num2){
             return sum.apply(this,[num1,num2]);//传入数组
         }
         function callsum2(num1,num2){
             return sum.apply(this,arguments);//传入arguments对象
         }

         alert(callsum1(10,10));//20
         alert(callsum2(10,10));//20

二、call()方法

call()方法与apply()方法的作用相同，区别仅仅在于接受参数的方式不同。对于call()方法而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。也即，在使用call()方法时，传递给函数的参数必须逐个列举出来，如下

         function sum(num1,num2){
             return num1 + num2;
         }

         function callsum(num1,num2){
             return sum.call(this, num1, num2); 
         }

         alert(callsum(10,10));//20

三、传参并非apply()和call()的真正存在意义，其真正强大地方在于能够扩充函数的作用域。使用此两种方法来扩充作用域最大好处就在于对象不需要与方法有任何耦合关系

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");

在这个例子中，函数 sayColor() 在对象外定义，即使它不属于任何对象，也可以引用关键字 this。对象 obj 的 color 属性等于 blue。调用 call() 方法时，第一个参数是 obj，说明应该赋予 sayColor() 函数中的 this 关键字值是 obj。第二个和第三个参数是字符串。它们与 sayColor() 函数中的参数 sPrefix 和 sSuffix 匹配，最后生成的消息 "The color is blue, a very nice color indeed." 将被显示出来。

function sayColor(sPrefix,sSuffix) {
    alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

这个例子与前面的例子相同，只是现在调用的是 apply() 方法。调用 apply() 方法时，第一个参数仍是 obj，说明应该赋予 sayColor() 函数中的 this 关键字值是 obj。第二个参数是由两个字符串构成的数组，与 sayColor() 函数中的参数 sPrefix 和 sSuffix 匹配，最后生成的消息仍是 "The color is blue, a very nice color indeed."，将被显示出来。

call()与apply()的用法与区别

猜你喜欢