Qual é a diferença entre usar calle applychamar uma função?

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

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

Existem diferenças de desempenho entre os dois métodos mencionados acima? Quando é melhor usar callrepetidamente applye vice-versa?

A diferença é que applypermite invocar a função argumentscomo uma matriz; callrequer que os parâmetros sejam listados explicitamente. Um acelerador é útil " A para um rray e C para C omma."

Consulte a documentação da MDN sobre aplicar e ligar .

Pseudo-sintaxe:

theFunction.apply(valueForThis, arrayOfArgs)

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

Há também, a partir do ES6, a possibilidade de spreado array ser usado com a callfunção, você pode ver as compatibilidades aqui .

Código de amostra:

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. Scott Allen tem uma boa redação sobre o assunto.

Basicamente, eles diferem na maneira como lidam com argumentos de função.

O método apply () é idêntico ao call (), exceto apply () requer uma matriz como o segundo parâmetro. A matriz representa os argumentos para o método de destino ".

Assim:

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

Para responder à parte sobre quando usar cada função, use applyse você não souber o número de argumentos que estará passando ou se eles já estiverem em uma matriz ou objeto semelhante a matriz (como o argumentsobjeto para encaminhar seus próprios argumentos. Use de calloutra forma, pois não há necessidade de agrupar os argumentos em uma matriz.

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

Quando não estou passando nenhum argumento (como o seu exemplo), prefiro calljá que estou chamando a função. applyimplicaria que você está aplicando a função aos argumentos (inexistentes).

Não deve haver diferenças de desempenho, exceto talvez se você usar applye agrupar os argumentos em uma matriz (por exemplo, em f.apply(thisObject, [a, b, c])vez de f.call(thisObject, a, b, c)). Eu não o testei, então pode haver diferenças, mas seria muito específico do navegador. É provável que callseja mais rápido se você ainda não tiver os argumentos em uma matriz e applymais rápido se tiver.

Aqui está um bom mnemônico. A plicar usa A rrays e A lways leva um ou dois argumentos. Quando você usa C, tudo o que você precisa é C ou o número de argumentos.

Embora esse seja um tópico antigo, eu só queria salientar que o .call é um pouco mais rápido que o .apply. Eu não posso te dizer exatamente o porquê.

Consulte jsPerf, http://jsperf.com/test-call-vs-apply/3

[ UPDATE!]

Douglas Crockford menciona brevemente a diferença entre os dois, o que pode ajudar a explicar a diferença de desempenho ... http://youtu.be/ya4UHuXNygM?t=15m52s

Apply usa uma matriz de argumentos, enquanto Call usa zero ou mais parâmetros individuais! Ah, ah!

.apply(this, [...])

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

Segue um extrato de Closure: The Definitive Guide, de Michael Bolin . Pode parecer um pouco demorado, mas está saturado de muita percepção. Do "Apêndice B. Conceitos de JavaScript frequentemente incompreendidos":

O que thisse refere quando uma função é chamada

Ao chamar uma função do formulário foo.bar.baz(), o objeto foo.baré chamado de receptor. Quando a função é chamada, é o receptor que é usado como o valor para 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);

Se não houver um receptor explícito quando uma função é chamada, o objeto global se torna o receptor. Conforme explicado em "goog.global" na página 47, window é o objeto global quando o JavaScript é executado em um navegador da web. Isso leva a um comportamento surpreendente:

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

Mesmo assim, obj.addValuese se freferem à mesma função, eles se comportam de maneira diferente quando chamados, porque o valor do receptor é diferente em cada chamada. Por esse motivo, ao chamar uma função que se refere this, é importante garantir que thiso valor correto seja chamado. Para ser claro, se thisnão fosse referenciado no corpo da função, o comportamento de f(20)e obj.addValues(20)seria o mesmo.

Como as funções são objetos de primeira classe em JavaScript, elas podem ter seus próprios métodos. Todas as funções possuem os métodos call()e apply()que permitem redefinir o receptor (ou seja, o objeto a que thisse refere) ao chamar a função. As assinaturas de método são as seguintes:

/**
* @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;

Observe que a única diferença entre call()e apply()é que call()recebe os parâmetros da função como argumentos individuais, enquanto os apply()recebe como uma única matriz:

// 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]);

As seguintes chamadas são equivalentes, como fe obj.addValuesse referem à mesma função:

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

No entanto, como call()nem apply()usa o valor de seu próprio receptor para substituir o argumento do receptor quando não for especificado, o seguinte não funcionará:

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

O valor de thisnunca pode ser nullou undefinedquando uma função é chamada. Quando nullou undefinedé fornecido como receptor para call()ou apply(), o objeto global é usado como o valor para o receptor. Portanto, o código anterior tem o mesmo efeito colateral indesejável de adicionar uma propriedade nomeada valueao objeto global.

Pode ser útil pensar em uma função como não tendo conhecimento da variável à qual está atribuída. Isso ajuda a reforçar a ideia de que o valor disso será vinculado quando a função for chamada e não quando for definida.

Fim da extração.

Às vezes, é útil que um objeto peça emprestada a função de outro objeto, o que significa que o objeto emprestado simplesmente executa a função emprestada como se fosse sua.

Um pequeno exemplo de código:

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

Esses métodos são muito úteis para fornecer aos objetos funcionalidade temporária.

Outro exemplo com Call, Apply e Bind. A diferença entre Call e Apply é evidente, mas o Bind funciona assim:

1. Bind retorna uma instância de uma função que pode ser executada
2. O primeiro parâmetro é ' this '
3. O segundo parâmetro é uma lista de argumentos separados por vírgula (como Chamada )

}

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
*/

Gostaria de mostrar um exemplo, onde o argumento 'valueForThis' é usado:

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] 

** detalhes: http://es5.github.io/#x15.4.4.7 *

Call () recebe argumentos separados por vírgula, ex:

.call(scope, arg1, arg2, arg3)

e apply () recebe uma matriz de argumentos, ex:

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

Aqui estão mais alguns exemplos de uso: http://blog.i-evaluation.com/2012/08/15/javascript-call-and-apply/

Nos documentos MDN sobre Function.prototype.apply () :

O método apply () chama uma função com um determinado thisvalor e argumentos fornecidos como uma matriz (ou um objeto semelhante a uma matriz).

Sintaxe

fun.apply(thisArg, [argsArray])

Nos documentos MDN sobre Function.prototype.call () :

O método call () chama uma função com um determinado thisvalor e argumentos fornecidos individualmente.

Sintaxe

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

Em Function.apply e Function.call em JavaScript :

O método apply () é idêntico ao call (), exceto apply () requer uma matriz como o segundo parâmetro. A matriz representa os argumentos para o método de destino.

Exemplo de código:

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'
));

Veja também este violino .

A diferença fundamental é que call()aceita uma lista de argumentos , enquanto apply()aceita uma única matriz de argumentos .

Aqui está um post pequeno, escrevi sobre isso:

http://sizeableidea.com/call-versus-apply-javascript/

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"

A diferença é que call()leva os argumentos da função separadamente e apply()leva os argumentos da função em uma matriz.

Podemos diferenciar chamadas e aplicar métodos como abaixo

CHAMADA: Uma função com argumento fornece individualmente. Se você conhece os argumentos a serem transmitidos ou não há argumentos a serem transmitidos, pode usar call.

APLICAR: Chame uma função com argumento fornecido como uma matriz. Você pode usar o apply se não souber quantos argumentos serão transmitidos para a função.

Há uma vantagem de usar a aplicação sobre chamada, não precisamos alterar o número de argumentos, apenas podemos alterar uma matriz que é passada.

Não há grande diferença no desempenho. Mas podemos dizer que a chamada é um pouco mais rápida do que comparar para aplicar, porque uma matriz precisa avaliar no método apply.

A diferença entre esses métodos e os métodos é como você deseja passar os parâmetros.

"A para array e C para vírgula" é um mnemônico útil.

Chamar e aplicar ambos são usados ​​para forçar o thisvalor quando uma função é executada. A única diferença é que callrecebe n+1argumentos onde 1 é thise 'n' arguments. applyleva apenas dois argumentos, um é thiso outro é matriz de argumentos.

A vantagem que vejo applyacima callé que podemos delegar facilmente uma chamada de função para outra função sem muito esforço;

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

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

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

Observe como é fácil delegado hellopara sayHellousar apply, mas com callisso é muito difícil de alcançar.

Mesmo assim calle applyobtendo a mesma coisa, acho que há pelo menos um lugar onde você não pode usar, callmas só pode usá-lo apply. É quando você deseja dar suporte à herança e deseja chamar o construtor.

Aqui está uma função que permite criar classes que também suporta a criação de classes estendendo outras classes.

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

Resumo:

Ambos call()e apply()são métodos localizados em Function.prototype. Portanto, eles estão disponíveis em todos os objetos de função através da cadeia de protótipos. Ambos call()e apply()podem executar uma função com um valor especificado de this.

A principal diferença entre call()e apply()é a maneira como você deve passar argumentos para ele. Em ambos call()e apply()você passa como primeiro argumento o objeto para o qual deseja ser o valor this. Os outros argumentos diferem da seguinte maneira:

• Com call()você tem que colocar os argumentos normalmente (a partir do segundo argumento)
• Com apply()você tem que passar na matriz de argumentos.

Exemplo:

let obj = {
  val1: 5,
  val2: 10
}

const summation = function (val3, val4) {
  return  this.val1 + this.val2 + val3 + val4;
}

console.log(summation.apply(obj, [2 ,3]));
// first we assign we value of this in the first arg
// with apply we have to pass in an array


console.log(summation.call(obj, 2, 3));
// with call we can pass in each arg individually

Por que eu precisaria usar essas funções?

O thisvalor pode ser complicado às vezes em javascript. O valor de thisdeterminado quando uma função é executada e não quando uma função é definida. Se nossa função depende de uma thisligação correta , podemos usar call()e apply()impor esse comportamento. Por exemplo:

var name = 'unwantedGlobalName';

const obj =  {
  name: 'Willem',
  sayName () { console.log(this.name);}
}


let copiedMethod = obj.sayName;
// we store the function in the copiedmethod variable



copiedMethod();
// this is now window, unwantedGlobalName gets logged

copiedMethod.call(obj);
// we enforce this to be obj, Willem gets logged

A principal diferença é que, usando call, podemos alterar o escopo e passar argumentos normalmente, mas apply permite chamá-lo usando argumentos como uma matriz (passá-los como uma matriz). Mas em termos do que eles devem fazer no seu código, eles são bem parecidos.

Enquanto a sintaxe dessa função é quase idêntica à de apply (), a diferença fundamental é que call () aceita uma lista de argumentos, enquanto apply () aceita uma única matriz de argumentos.

Então, como você vê, não há uma grande diferença, mas ainda assim, há casos em que preferimos usar call () ou apply (). Por exemplo, observe o código abaixo, que encontra o menor e o maior número em uma matriz do MDN, usando o método apply:

// 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)

Portanto, a principal diferença é a maneira como transmitimos os argumentos

:

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

Aplique:

function.apply(thisArg, [argsArray]);

Deixe-me adicionar um pequeno detalhe a isso.

essas duas chamadas são quase equivalentes:

func.call(context, ...args); // pass an array as list with spread operator

func.apply(context, args);   // is same as using apply

Há apenas uma pequena diferença:

• O spreadoperador ... permite passar iterável args como a lista a ser chamada.
• O applyaceita apenas argumentos do tipo array .

Portanto, essas chamadas se complementam. Onde esperamos um iterável , callfunciona, onde esperamos um array , applyfunciona.

E para objetos que são tanto iterable e gama-like , como uma matriz real, nós tecnicamente poderia usar qualquer um deles, mas aplicam-se provavelmente será mais rápido porque a maioria dos motores de JavaScript otimizá-lo internamente melhor.