¿Cuál es la diferencia entre llamar y aplicar?

3263

¿Cuál es la diferencia entre usar calle applyinvocar una función?

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

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

¿Existen diferencias de rendimiento entre los dos métodos mencionados anteriormente? ¿Cuándo es mejor usar callover applyy viceversa?

9
  • 747
    Piense aen solicitar una matriz de argumentos y cen una llamada a columnas de argumentos. 12/06/12 a las 6:17
  • 190
    @LarryBattle Hago casi lo mismo, pero creo que una aplicación para una matriz y una c para una llamada (es decir, argumentos separados por comas).
    Samih
    6 de diciembre de 2013 a las 16:20
  • 7
    Estoy de acuerdo en que es una estupidez. Lo que es molesto es que de alguna manera esta pregunta se hace durante las entrevistas porque algún tonto influyente agregó la pregunta a su lista de preguntas js importantes.
    Ringo
    10 mar 14 a las 22:55
  • 11
    Usted aplicar para un trabajo una vez (un argumento), usted [telefónicas] llamadas personas muchas veces (varios argumentos). Alternativa: hay [¿también?] Muchos juegos de Call of Duty. 4 de diciembre de 2014 a las 3:27
  • 1
    Cuando la intención es invocar una función variable con una lista de valores de argumento independientemente de "este" valor, entonces utilice el operador de extensión ES6, por ejemplo, fn(...input)donde la entrada es una matriz. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    Gajus
    18 de diciembre de 2014 a las 1:22
3807

La diferencia es que le applypermite invocar la función argumentscomo una matriz; callrequiere que los parámetros se enumeren explícitamente. Una mnemónica útil es " A para un RRay y C para c omma."

Consulte la documentación de MDN sobre cómo solicitar y llamar .

Pseudo sintaxis:

theFunction.apply(valueForThis, arrayOfArgs)

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

También existe, a partir de ES6, la posibilidad spreadde utilizar la matriz con la callfunción, puedes ver las compatibilidades aquí .

Código de muestra:

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
13
  • 29
    Una cosa para agregar es que los argumentos deben ser una matriz numérica ([]). Las matrices asociativas ({}) no funcionarán. 28/07/12 a las 16:18
  • 357
    @KevinSchroeder: En el lenguaje javascript, []se llama matriz , {}se llama objeto .
    Martijn
    10 de ene. De 2013 a las 15:19
  • 95
    A menudo solía olvidar cuál toma una matriz y cuál espera que enumeres los argumentos. Una técnica que solía recordar es que si la primera letra del método comienza con a, entonces se necesita una matriz, es decir, una matriz de pply 6/10/2013 a las 20:43
  • 19
    @SAM Usar una llamada en lugar de una llamada a una función normal solo tiene sentido si necesita cambiar el valor de esto para la llamada a la función. Un ejemplo (que convierte un objeto-argumentos de una función en una matriz): Array.prototype.slice.call(arguments)o [].slice.call(arguments). aplicar tiene sentido si tiene los argumentos en una matriz, por ejemplo, en una función que llama a otra función con (casi) los mismos parámetros. Recomendación Use una llamada de función normal funcname(arg1)si eso hace lo que necesita, y guarde la llamada y solicite para esas ocasiones especiales cuando realmente las necesite.
    some
    16 de julio de 2014 a las 5:04
  • 6
    @KunalSingh Ambos cally applytoma dos parámetros. El primer argumento de la apply' and función call` debe ser el objeto propietario y el segundo parámetro serán parámetros separados por matrices o comas, respectivamente. Si pasa nullo undefinedcomo primer argumento, en modo no estricto se reemplazan con un objeto global, es decirwindow 24 feb 2016 a las 12:42
245

K. Scott Allen tiene un buen artículo sobre el tema.

Básicamente, difieren en cómo manejan los argumentos de función.

The apply() method is identical to call(), except apply() requires an array as the second parameter. The array represents the arguments for the target method."

Entonces:

// assuming you have f
function f(message) { ... }
f.call(receiver, "test");
f.apply(receiver, ["test"]);
3
  • 46
    el segundo parámetro de apply () y call () es opcional, no obligatorio. 29/07/11 a las 4:01
  • 37
    El primer parámetro tampoco es necesario.
    Ikrom
    5 de junio de 2013 a las 5:33
  • 2
    @Ikrom, el primer parámetro no es obligatorio, callsino un requisito para apply 28 de enero de 2020 a las 6:58
168

Para responder la parte sobre cuándo usar cada función, use applysi no sabe la cantidad de argumentos que pasará, o si ya están en una matriz o en un objeto similar a una matriz (como el argumentsobjeto para reenviar sus propios argumentos. Use de callotra manera, ya que no es necesario envolver los argumentos en una 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

Cuando no paso ningún argumento (como su ejemplo), prefiero callya que estoy llamando a la función. applyimplicaría que está aplicando la función a los argumentos (inexistentes).

No debería haber ninguna diferencia de rendimiento, excepto tal vez si usa applyy envuelve los argumentos en una matriz (por ejemplo, en f.apply(thisObject, [a, b, c])lugar de f.call(thisObject, a, b, c)). No lo he probado, por lo que podría haber diferencias, pero sería muy específico del navegador. Es probable que callsea ​​más rápido si aún no tiene los argumentos en una matriz y applymás rápido si los tiene.

0
118

Aquí tienes una buena mnemotécnica. A plicar utiliza A rrays y A lways toma uno o dos argumentos. Cuando usa C todo, tiene que C ontar el número de argumentos.

1
  • 2
    ¡Mnemotécnico útil allí mismo !. Cambiaré 'uno o dos argumentos' para decir 'un máximo de dos argumentos' ya que no applyse requiere ni el primero ni el segundo parámetro de . Sin embargo, no estoy seguro de por qué uno llamará applyo callsin un parámetro. Parece que alguien está tratando de averiguar por qué aquí stackoverflow.com/questions/15903782/… 3 de noviembre de 2013 a las 11:40
95

Si bien este es un tema antiguo, solo quería señalar que .call es un poco más rápido que .apply. No puedo decirte exactamente por qué.

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


[ UPDATE!]

Douglas Crockford menciona brevemente la diferencia entre los dos, lo que puede ayudar a explicar la diferencia de rendimiento ... http://youtu.be/ya4UHuXNygM?t=15m52s

Apply toma una matriz de argumentos, mientras que Call toma cero o más parámetros individuales. ¡Ah, ja!

.apply(this, [...])

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

5
  • Esto depende de lo que haga la función con los parámetros / matriz, si no necesita procesar la matriz, ¿lleva menos tiempo? 1 mar 12 a las 20:30
  • 12
    Curiosamente, incluso sin la matriz, la llamada sigue siendo mucho más rápida. jsperf.com/applyvscallvsfn2
    Josh Mc
    11 de mayo de 2012 a las 1:42
  • @JoshMc Eso sería muy específico del navegador. En IE 11, solicito que vaya dos veces más rápido que una llamada. 8/10/2013 a las 1:10
  • 1
    1. Crear una nueva matriz significa que el recolector de basura necesitará limpiarla en algún momento. 2. Acceder a los elementos de la matriz mediante la desreferenciación es menos eficaz que acceder a una variable (parámetro) directamente. (Creo que eso es lo que kmatheny quiso decir con "análisis", que en realidad es algo bastante diferente). Pero ninguno de mis argumentos explica el jsperf. Eso debe estar relacionado con la implementación del motor de las dos funciones, por ejemplo, quizás crean una matriz vacía de todos modos, si no se pasó ninguna. 23/11/2013 a las 16:41
  • Gracias por compartir la prueba y el video.
    Gary
    23/07/2017 a las 11:22
78

Sigue un extracto de Closure: The Definitive Guide de Michael Bolin . Puede parecer un poco largo, pero está saturado de mucha información. Del "Apéndice B. Conceptos de JavaScript frecuentemente mal entendidos":


Qué se thisrefiere a cuando se llama a una función

Cuando se llama a una función del formulario foo.bar.baz(), el objeto foo.barse denomina receptor. Cuando se llama a la función, es el receptor el que se utiliza como 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);

Si no hay un receptor explícito cuando se llama a una función, entonces el objeto global se convierte en el receptor. Como se explica en "goog.global" en la página 47, la ventana es el objeto global cuando se ejecuta JavaScript en un navegador web. Esto conduce a un comportamiento sorprendente:

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

Aunque obj.addValuesy se frefieren a la misma función, se comportan de manera diferente cuando se les llama porque el valor del receptor es diferente en cada llamada. Por este motivo, al llamar a una función a la que se refiere this, es importante asegurarse de que thistendrá el valor correcto cuando se llame. Para ser claros, si thisno se hiciera referencia en el cuerpo de la función, entonces el comportamiento de f(20)y obj.addValues(20)sería el mismo.

Debido a que las funciones son objetos de primera clase en JavaScript, pueden tener sus propios métodos. Todas las funciones tienen los métodos call()y apply()que permiten redefinir el receptor (es decir, el objeto al que se thisrefiere) al llamar a la función. Las firmas del método son las siguientes:

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

Tenga en cuenta que la única diferencia entre call()y apply()es que call()recibe los parámetros de la función como argumentos individuales, mientras que los apply()recibe como una ú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]);

Las siguientes llamadas son equivalentes, como fy obj.addValuesse refieren a la misma función:

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

Sin embargo, dado que ni call()ni apply()utiliza el valor de su propio receptor para sustituir el argumento del receptor cuando no está especificado, lo siguiente no funcionará:

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

El valor de thisnunca puede ser nullo undefinedcuando se llama a una función. Cuando nullo undefinedse suministra como receptor a call()o apply(), el objeto global se utiliza en su lugar como valor para el receptor. Por lo tanto, el código anterior tiene el mismo efecto secundario indeseable de agregar una propiedad nombrada valueal objeto global.

Puede resultar útil pensar que una función no tiene conocimiento de la variable a la que está asignada. Esto ayuda a reforzar la idea de que el valor de esto estará vinculado cuando se llame a la función en lugar de cuando se defina.


Fin del extracto.

3
  • Solo para tener en cuenta el hecho de que additionalValuesno se hace referencia dentro del obj.addValuescuerpo. 27/10/15 a las 12:12
  • Sé que estaba respondiendo a la pregunta, pero le gustaría agregar: podría haber usado bind al definir f. var f = obj.addValues;se convierte en var f = obj.addValues.bind(obj) y ahora f (20) funcionaría sin tener que usar call o aplicar cada vez. 25 oct 2017 a las 19:15
  • Sé que no lo escribiste, pero resaltaste el texto y los ejemplos del libro como relevantes, y estoy muy agradecido. Fueron muy útiles.
    Fralcon
    7 feb.20 a las 1:14
36

A veces es útil que un objeto tome prestada la función de otro objeto, lo que significa que el objeto prestado simplemente ejecuta la función prestada como si fuera propia.

Un pequeño ejemplo 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

Estos métodos son muy útiles para dar a los objetos una funcionalidad temporal.

1
26

Otro ejemplo con Llamar, Aplicar y Vincular. La diferencia entre Call y Apply es evidente, pero Bind funciona así:

  1. Bind devuelve una instancia de una función que se puede ejecutar
  2. El primer parámetro es ' esto '
  3. El segundo parámetro es una lista de argumentos separados por comas (como 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
*/
0
23

Me gustaría mostrar un ejemplo, donde se usa el argumento '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] 

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

0
22

Call () toma argumentos separados por comas, por ejemplo:

.call(scope, arg1, arg2, arg3)

y apply () toma una matriz de argumentos, por ejemplo:

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

aquí hay algunos ejemplos de uso más: http://blog.i-evaluation.com/2012/08/15/javascript-call-and-apply/

1
  • `// llamar () === argumentos separados por comas (lista de argumentos). llamar (this, args1, args2, args3, ...) // aplicar () === matriz de argumentos (elementos de matriz). aplicar (esto, [arr0, arr1, arr2, ...]) `
    xgqfrms
    25/12/2016 a las 13:52
19

De los documentos de MDN en Function.prototype.apply () :

The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).

Syntax

fun.apply(thisArg, [argsArray])

De los documentos de MDN en Function.prototype.call () :

The call() method calls a function with a given this value and arguments provided individually.

Syntax

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

Desde Function.apply y Function.call en JavaScript :

The apply() method is identical to call(), except apply() requires an array as the second parameter. The array represents the arguments for the target method.


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

Vea también este violín .

12

La diferencia fundamental es que call()acepta una lista de argumentos , mientras que apply()acepta una única matriz de argumentos .

1
10

Aquí hay una publicación pequeña, escribí sobre esto:

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"
1
8

La diferencia es que call()toma los argumentos de la función por separado y apply()toma los argumentos de la función en una matriz.

6

Podemos diferenciar los métodos de llamada y aplicación de la siguiente manera

CALL: Una función con argumento proporcionar individualmente. Si conoce los argumentos que se deben pasar o no hay ningún argumento para pasar, puede usar call.

APLICAR: Llame a una función con un argumento proporcionado como una matriz. Puede usar aplicar si no sabe cuántos argumentos se van a pasar a la función.

Hay una ventaja de usar aplicar sobre la llamada, no necesitamos cambiar el número de argumentos, solo podemos cambiar una matriz que se pasa.

No hay una gran diferencia en el rendimiento. Pero podemos decir que la llamada es un poco más rápida en comparación con la aplicación porque una matriz debe evaluarse en el método de aplicación.

5

La diferencia entre estos métodos es cómo desea pasar los parámetros.

“A para matriz y C para coma” es una práctica mnemotécnica.

1
  • 12
    ¿Qué proporciona esta respuesta que no esté bien proporcionada en otras respuestas?
    Kyll
    7 de septiembre de 2015 a las 10:38
5

Llamar y aplicar ambos se utilizan para forzar el thisvalor cuando se ejecuta una función. La única diferencia es que calltoma n+1argumentos donde 1 es thisy 'n' arguments. applytoma solo dos argumentos, uno es thisel otro es una matriz de argumentos.

La ventaja que veo en applyover calles que podemos delegar fácilmente una llamada de función a otra función sin mucho esfuerzo;

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

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

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

Observa con qué facilidad delegamos helloal sayHellouso apply, pero con callesto es muy difícil de conseguir.

4

A pesar de que cally applylograr lo mismo, creo que hay al menos un lugar donde no se puede usar, callpero solo se puede usar apply. Ahí es cuando desea admitir la herencia y desea llamar al constructor.

Aquí hay una función que le permite crear clases que también admite la creación de clases ampliando otras clases.

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
1
  • Creo que la llamada funcionaría allí con el operador de propagación como se describe en la respuesta seleccionada. A menos que me esté perdiendo algo. 25 oct 2017 a las 19:10
4

Resumen:

Ambos call()y apply()son métodos que se encuentran en Function.prototype. Por lo tanto, están disponibles en todos los objetos de función a través de la cadena de prototipos. Ambos call()y apply()pueden ejecutar una función con un valor especificado de this.

La principal diferencia entre call()y apply()es la forma en que tienes que pasar argumentos. En ambos call()y apply()pasa como primer argumento el objeto que desea que tenga el valor this. Los otros argumentos difieren de la siguiente manera:

  • Con call()tienes que poner los argumentos normalmente (comenzando desde el segundo argumento)
  • Con apply()tienes que pasar una serie de argumentos.

Ejemplo:

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 qué debería utilizar estas funciones?

El thisvalor puede ser complicado a veces en javascript. El valor de thisdeterminado cuando se ejecuta una función, no cuando se define una función. Si nuestra función depende de un thisenlace correcto , podemos usar call()y apply()para hacer cumplir este comportamiento. Por ejemplo:

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
4

La principal diferencia es que, al usar la llamada, podemos cambiar el alcance y pasar argumentos como de costumbre, pero aplicar le permite llamarlo usando argumentos como una matriz (pasarlos como una matriz). Pero en términos de lo que deben hacer en su código, son bastante similares.

While the syntax of this function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

Entonces, como puede ver, no hay una gran diferencia, pero aún así, hay casos en los que preferimos usar call () o apply (). Por ejemplo, mire el código a continuación, que encuentra el número más pequeño y más grande en una matriz de MDN, usando el método de aplicación:

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

Entonces, la principal diferencia es la forma en que pasamos los argumentos:

Llamada:

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

Solicitar:

function.apply(thisArg, [argsArray]);
2

Permítanme agregar un pequeño detalle a esto.

estas dos llamadas son casi equivalentes:

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

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

Solo hay una pequeña diferencia:

  • The spread operator ... allows passing iterable args as the list to call.
  • The apply accepts only array-like args.

Entonces, estas llamadas se complementan entre sí. Donde esperamos un iterable , callfunciona, donde esperamos un arreglo , applyfunciona.

Y para los objetos que son a la vez iterable y gama-como , como un conjunto de bienes, que técnicamente podríamos utilizar cualquiera de ellos, pero aplicable será probablemente más rápido porque la mayoría de los motores de JavaScript internamente optimizar mejor.

1

call () Es un método predefinido en javascript. Este método invoca un método (función) especificando el objeto propietario.

  function sayHello(){
  return "Hello " + this.name;
}
        
var obj = {name: "Sandy"};
        
sayHello.call(obj);
        
// Returns "Hello Sandy"

La llamada acepta argumento

function saySomething(message){
  return this.name + " is " + message;
}
        
var person4 = {name:  "John"};
        
saySomething.call(person4, "awesome");
// Returns "John is awesome"    

apply () El método de aplicación es similar al método call (). La única diferencia es que, el método call () toma los argumentos por separado, mientras que el método apply () toma los argumentos como una matriz.

ejemplo

function saySomething(message){
  return this.name + " is " + message;
}
        
var person4 = {name:  "John"};
        
saySomething.apply(person4, ["awesome"]);
0

Bien explicado por flatline . Solo quiero agregar un ejemplo simple. lo que lo hace fácil de entender para los principiantes.

func.call(context, args1 , args2 ); // pass arguments as "," saprated value

func.apply(context, [args1 , args2 ]);   //  pass arguments as "Array"

también usamos el método "Llamar" y "Aplicar" para cambiar la referencia como se define en el código siguiente

    let Emp1 = {
        name: 'X',
        getEmpDetail: function (age, department) {
            console.log('Name :', this.name, '  Age :', age, '  Department :', department)
        }
    }
    Emp1.getEmpDetail(23, 'Delivery')

    // 1st approch of chenging "this"
    let Emp2 = {
        name: 'Y',
        getEmpDetail: Emp1.getEmpDetail
    }
    Emp2.getEmpDetail(55, 'Finance')

    // 2nd approch of changing "this" using "Call" and "Apply"
    let Emp3 = {
        name: 'Z',
    }

    Emp1.getEmpDetail.call(Emp3, 30, 'Admin')        
// here we have change the ref from **Emp1 to Emp3**  object
// now this will print "Name =  X" because it is pointing to Emp3 object
    Emp1.getEmpDetail.apply(Emp3, [30, 'Admin']) //
0

Ambos llaman y aplican de la misma manera. Llama inmediatamente cuando usamos llamar y aplicar.

Tanto la llamada como la aplicación toman "este" parámetro como primer argumento y el segundo solo difiere.

la llamada toma los argumentos de las funciones como una lista (coma) Apply toma los argumentos de las funciones como una matriz.

Puede encontrar la diferencia completa entre vincular, llamar y aplicar en el siguiente video de YouTube.

https://www.youtube.com/watch?v=G-EfxnG0DtY&t=180s

-2

El call()método llama a una función con un thisvalor dado y argumentos proporcionados individualmente.ingrese la descripción de la imagen aquí

apply()- Similar al call()método, el primer parámetro en el apply()método establece el thisvalor que es el objeto sobre el que se invoca la función. En este caso, es el objobjeto de arriba. La única diferencia entre el método apply()y call()es que el segundo parámetro del apply()método acepta los argumentos de la función real como una matriz. ingrese la descripción de la imagen aquí

1
  • 3
    Aunque agradecemos el esfuerzo que hiciste al realizar las imágenes, no son de mucha utilidad. Nadie puede copiar el código para usarlo, probarlo, mejorarlo ... El código debe pegarse como texto aquí
    Vega
    25/06/20 a las 17:57