提问



使用callapply调用函数有什么区别?


var func = function() {
  alert('hello!');
};


func.apply(); vs func.call();


上述两种方法之间是否存在性能差异?何时最好使用call而不是apply,反之亦然?

最佳参考


不同之处在于apply允许您使用arguments作为数组调用函数; call要求明确列出参数。一个有用的助记符是 A a rray和 C c omma。


请参阅MDN关于申请和电话的文件。[104] [105]


伪语法:


theFunction.apply(valueForThis, arrayOfArgs)


theFunction.call(valueForThis, arg1, arg2, ...)


从ES6开始,spread数组可能与call函数一起使用,你可以在这里看到兼容性。[106] [107]


示例代码:




function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession +".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Claude", "mathematician");
theFunction.call(undefined, ...["Matthew", "physicist"]); // used with the spread operator



K.斯科特艾伦对此事有一篇很好的文章。[108]


基本上,他们在处理函数参数方面有所不同。



  apply()方法与call()相同,但apply()需要数组作为第二个参数。该数组表示目标方法的参数。



所以:


// assuming you have f
function f(message) { ... }
f.call(receiver, "test");
f.apply(receiver, ["test"]);

其它参考1


要回答有关何时使用每个函数的部分,如果您不知道要传递的参数数量,或者它们是否已经在数组或类数组对象中(如apply,请使用apply。 37]]对象转发你自己的参数。否则使用call,因为不需要将参数包装在数组中。


f.call(thisObject, a, b, c); // Fixed number of arguments

f.apply(thisObject, arguments); // Forward this function's arguments

var args = [];
while (...) {
    args.push(some_value());
}
f.apply(thisObject, args); // Unknown number of arguments


当我没有传递任何参数时(比如你的例子),我更喜欢call,因为我调用函数。 apply意味着你将函数应用于(不存在的)参数。


不应该有任何性能差异,除非您使用apply并将参数包装在数组中(例如f.apply(thisObject, [a, b, c])而不是f.call(thisObject, a, b, c))。我还没有测试过,所以可能会有差异,但它会特定于浏览器。如果你没有数组中的参数,那么call可能会更快,如果你这样做,apply会更快。

其它参考2


这是一个很好的助记符。 A pply使用 A rrays而 A lways需要一个或两个参数。当你使用 C 所有你必须 C 数量参数的数量。

其它参考3


虽然这是一个古老的话题,但我只想指出.call比.apply略快。我不能告诉你究竟为什么。


见jsPerf,http://jsperf.com/test-call-vs-apply/3 [109]





[[UPDATE!]]


Douglas Crockford简要提到了两者之间的差异,这可能有助于解释性能差异...... http://youtu.be/ya4UHuXNygM?t=15m52s [110]


Apply接受一组参数,而Call接受零个或多个单独的参数!啊哈!


.apply(this, [...])


.call(this, param1, param2, param3, param4...)

其它参考4


遵循Michael Bolin的Closure:The Definitive Guide的摘录。它可能看起来有点冗长,但它已经充满了很多洞察力。来自附录B.经常误解的JavaScript概念:





调用函数时this的含义



当调用foo.bar.baz()形式的函数时,对象foo.bar被称为接收器。调用该函数时,接收器用作this的值:


var obj = {};
obj.value = 10;
/** @param {...number} additionalValues */
obj.addValues = function(additionalValues) {
  for (var i = 0; i < arguments.length; i++) {
    this.value += arguments[i];
  }
  return this.value;
};
// Evaluates to 30 because obj is used as the value for 'this' when
// obj.addValues() is called, so obj.value becomes 10 + 20.
obj.addValues(20);


如果在调用函数时没有显式接收器,则全局对象成为接收器。如第47页的goog.global中所述,窗口是在Web浏览器中执行JavaScript时的全局对象。这会导致一些令人惊讶的行为:


var f = obj.addValues;
// Evaluates to NaN because window is used as the value for 'this' when
// f() is called. Because and window.value is undefined, adding a number to
// it results in NaN.
f(20);
// This also has the unintentional side effect of adding a value to window:
alert(window.value); // Alerts NaN


即使obj.addValuesf引用相同的函数,它们在调用时的行为也不同,因为每次调用时接收器的值都不同。因此,在调用引用this的函数时,确保this在调用时具有正确的值非常重要。需要明确的是,如果函数体中未引用this,那么f(20)obj.addValues(20)的行为将是相同的。


因为函数是JavaScript中的第一类对象,所以它们可以有自己的方法。所有函数都有方法call()apply(),这使得在调用函数时可以重新定义接收器(即this所指的对象)。方法签名如下:


/**
* @param {*=} receiver to substitute for 'this'
* @param {...} parameters to use as arguments to the function
*/
Function.prototype.call;
/**
* @param {*=} receiver to substitute for 'this'
* @param {Array} parameters to use as arguments to the function
*/
Function.prototype.apply;


请注意,call()apply()之间的唯一区别是call()将函数参数作为单个参数接收,而apply()将它们作为单个数组接收:


// When f is called with obj as its receiver, it behaves the same as calling
// obj.addValues(). Both of the following increase obj.value by 60:
f.call(obj, 10, 20, 30);
f.apply(obj, [10, 20, 30]);


以下调用是等效的,因为fobj.addValues引用相同的函数:


obj.addValues.call(obj, 10, 20, 30);
obj.addValues.apply(obj, [10, 20, 30]);


但是,由于call()apply()都没有使用其自己的接收器的值来替换未指定的接收器参数,因此以下方法不起作用:


// Both statements evaluate to NaN
obj.addValues.call(undefined, 10, 20, 30);
obj.addValues.apply(undefined, [10, 20, 30]);


调用函数时,this的值永远不能是nullundefined。当nullundefined作为接收器提供给call()apply()时,全局对象将用作接收器的值。因此,前面的代码具有将名为value的属性添加到全局对象的相同的不良副作用。


将函数视为不知道分配给它的变量可能会有所帮助。这有助于强化这样一种观点,即在调用函数时,而不是在定义函数时,它的值将被约束。





提取物结束。

其它参考5


有时一个对象借用另一个对象的函数是有用的,这意味着借用对象只是执行lent函数,就像它自己一样。


一个小代码示例:


var friend = {
    car: false,
    lendCar: function ( canLend ){
      this.car = canLend;
 }

}; 

var me = {
    car: false,
    gotCar: function(){
      return this.car === true;
  }
};

console.log(me.gotCar()); // false

friend.lendCar.call(me, true); 

console.log(me.gotCar()); // true

friend.lendCar.apply(me, [false]);

console.log(me.gotCar()); // false


这些方法对于为对象提供临时功能非常有用。

其它参考6


Call,Apply和Bind的另一个例子。
Call和Apply之间的区别很明显,但 Bind 的工作原理如下:



  1. Bind返回可以执行的函数的实例

  2. 第一个参数是 this

  3. 第二个参数是逗号分隔参数列表(如 Call )



}


function Person(name) {
    this.name = name; 
}
Person.prototype.getName = function(a,b) { 
     return this.name + " " + a + " " + b; 
}

var reader = new Person('John Smith');

reader.getName = function() {
   // Apply and Call executes the function and returns value

   // Also notice the different ways of extracting 'getName' prototype
   var baseName = Object.getPrototypeOf(this).getName.apply(this,["is a", "boy"]);
   console.log("Apply: " + baseName);

   var baseName = Object.getPrototypeOf(reader).getName.call(this, "is a", "boy"); 
   console.log("Call: " + baseName);

   // Bind returns function which can be invoked
   var baseName = Person.prototype.getName.bind(this, "is a", "boy"); 
   console.log("Bind: " + baseName());
}

reader.getName();
/* Output
Apply: John Smith is a boy
Call: John Smith is a boy
Bind: John Smith is a boy
*/

其它参考7


我想展示一个例子,其中使用了valueForThis参数:


Array.prototype.push = function(element) {
   /*
   Native code*, that uses 'this'       
   this.put(element);
   */
}
var array = [];
array.push(1);
array.push.apply(array,[2,3]);
Array.prototype.push.apply(array,[4,5]);
array.push.call(array,6,7);
Array.prototype.push.call(array,8,9);
//[1, 2, 3, 4, 5, 6, 7, 8, 9] 


**详情:http://es5.github.io/#x15.4.4.7* [112]

其它参考8


Call()采用逗号分隔的参数,例如:


.call(scope, arg1, arg2, arg3)


和apply()接受一个参数数组,例如:


.apply(scope, [arg1, arg2, arg3])


这里有几个用法示例:
http://blog.i-evaluation.com/2012/08/15/javascript-call-and-apply/[113]

其它参考9


来自关于Function.prototype.apply()的MDN文档:[114]



  apply()方法调用具有给定this值的函数
  作为数组(或类数组对象)提供的参数。

  
  

语法



fun.apply(thisArg, [argsArray])



来自关于Function.prototype.call()的MDN文档:[115]



  call()方法调用具有给定this值的函数和单独提供的参数。

  
  

语法



fun.call(thisArg[, arg1[, arg2[, ...]]])



来自JavaScript中的 Function.apply和Function.call :[116]



  apply()方法与call()相同,但apply()需要
  数组作为第二个参数。数组表示参数
  目标方法。






代码示例:





var doSomething = function() {
    var arr = [];
    for(i in arguments) {
        if(typeof this[arguments[i]] !== 'undefined') {
            arr.push(this[arguments[i]]);
        }
    }
    return arr;
}

var output = function(position, obj) {
    document.body.innerHTML += '<h3>output ' + position + '</h3>' + JSON.stringify(obj) + '\n<br>\n<br><hr>';
}

output(1, doSomething(
    'one',
    'two',
    'two',
    'one'
));

output(2, doSomething.apply({one : 'Steven', two : 'Jane'}, [
    'one',
    'two',
    'two',
    'one'
]));

output(3, doSomething.call({one : 'Steven', two : 'Jane'},
    'one',
    'two',
    'two',
    'one'
));



根本区别在于call()接受 参数列表 ,而apply()接受 单个参数数组 即可。

其它参考10


这是一篇很小的帖子,我在这里写道:


http://sizeableidea.com/call-versus-apply-javascript/[117]


var obj1 = { which : "obj1" },
obj2 = { which : "obj2" };

function execute(arg1, arg2){
    console.log(this.which, arg1, arg2);
}

//using call
execute.call(obj1, "dan", "stanhope");
//output: obj1 dan stanhope

//using apply
execute.apply(obj2, ["dan", "stanhope"]);
//output: obj2 dan stanhope

//using old school
execute("dan", "stanhope");
//output: undefined "dan" "stanhope"

其它参考11


区别在于call()分别获取函数参数,apply()获取数组中的函数参数。

其它参考12


我们可以区分呼叫和应用方法如下


CALL:具有参数的函数单独提供。
如果你知道要传递的参数或者没有传递参数,你可以使用call。


APPLY:使用作为数组提供的参数调用函数。如果您不知道将有多少参数传递给函数,您可以使用apply。


使用apply over call有一个优点,我们不需要更改参数的数量,只有我们可以更改传递的数组。


性能没有太大差异。但是我们可以说调用比应用更快一点,因为数组需要在apply方法中进行评估。

其它参考13


这些方法之间的区别在于,您希望如何传递参数。


A for array和C for comma是一个方便的助记符。

其它参考14


调用和应用两者用于在执行函数时强制this值。唯一的区别是calln+1个参数,其中1是this'n' argumentsapply只有两个参数,一个是this,另一个是参数数组。


我在apply中看到call的优点是我们可以轻松地将函数调用委托给其他函数而不需要太多努力;


function sayHello() {
  console.log(this, arguments);
}

function hello() {
  sayHello.apply(this, arguments);
}

var obj = {name: 'my name'}
hello.call(obj, 'some', 'arguments');


观察我们使用applyhello委托给sayHello是多么容易,但是call这很难实现。

其它参考15


即使callapply实现同样的目的,我认为至少有一个地方你不能使用call,但只能使用apply。那是你想要支持继承并想要调用构造函数的时候。


这是一个函数,允许您创建通过扩展其他类来支持创建类的类。


function makeClass( properties ) {
    var ctor = properties['constructor'] || function(){}
    var Super = properties['extends'];
    var Class = function () {
                 // Here 'call' cannot work, only 'apply' can!!!
                 if(Super)
                    Super.apply(this,arguments);  
                 ctor.apply(this,arguments);
                }
     if(Super){
        Class.prototype = Object.create( Super.prototype );
        Class.prototype.constructor = Class;
     }
     Object.keys(properties).forEach( function(prop) {
           if(prop!=='constructor' && prop!=='extends')
            Class.prototype[prop] = properties[prop];
     });
   return Class; 
}

//Usage
var Car = makeClass({
             constructor: function(name){
                         this.name=name;
                        },
             yourName: function() {
                     return this.name;
                   }
          });
//We have a Car class now
 var carInstance=new Car('Fiat');
carInstance.youName();// ReturnsFiat

var SuperCar = makeClass({
               constructor: function(ignore,power){
                     this.power=power;
                  },
               extends:Car,
               yourPower: function() {
                    return this.power;
                  }
              });
//We have a SuperCar class now, which is subclass of Car
var superCar=new SuperCar('BMW xy',2.6);
superCar.yourName();//Returns BMW xy
superCar.yourPower();// Returns 2.6

其它参考16


主要区别在于,使用call,我们可以正常更改范围和传递参数,但apply允许您使用参数作为Array调用它(将它们作为数组传递)。但就他们在你的代码中做什么而言,它们非常相似。



  虽然这个函数的语法几乎与
  apply(),根本区别在于call()接受一个参数
  list,而apply()接受一个参数数组。



如你所见,没有太大的区别,但仍有一些情况我们更喜欢使用call()或apply()。例如,查看下面的代码,使用apply方法从MDN中查找数组中的最小和最大数字:


// min/max number in an array
var numbers = [5, 6, 2, 3, 7];

// using Math.min/Math.max apply
var max = Math.max.apply(null, numbers); 
// This about equal to Math.max(numbers[0], ...)
// or Math.max(5, 6, ...)

var min = Math.min.apply(null, numbers)


所以主要区别在于我们传递参数的方式:


拨打:结果


function.call(thisArg, arg1, arg2, ...);


应用结果


function.apply(thisArg, [argsArray]);