Métodos Apply vs Call en JavaScript
-
El método
call()en JavaScript -
El método
apply()en JavaScript -
El ejemplo del método
call()en JavaScript -
Forma alternativa utilizando el método
apply()
Este artículo explica cómo usar los métodos call() y apply() en JavaScript. La diferencia entre ambas funciones se explica con algunos ejemplos sencillos.
Echemos un vistazo a los siguientes métodos y cómo funcionan.
El método call() en JavaScript
Tomar el objeto propietario como argumento es el método call(). La palabra clave this se refiere al propietario de la función o del objeto al que pertenece.
También podemos llamar a un método para utilizarlo en diferentes objetos. Nos permitirá invocar los métodos con argumentos separados por comas.
Sintaxis del Método call() en JavaScript
abc_object.object_method.call(object_instance, arguments, ...)
Como se mencionó anteriormente, el método call() acepta dos parámetros, que describiremos a continuación.
- En el primer parámetro,
object_instancecontendrá la instancia de un objeto. - Los argumentos separados por comas están en el segundo parámetro.
El método apply() en JavaScript
apply() se usa para escribir en un objeto diferente. Toma los valores en forma de matriz.
Sintaxis del Método apply() en JavaScript
abc_object.object_method.apply(object_instance, [arguments_array...])
El método apply() acepta dos parámetros como se muestra arriba.
- En el primer parámetro,
object_instancecontendrá la instancia de un objeto. - En el segundo parámetro, los argumentos están en forma de matriz.
El ejemplo del método call() en JavaScript
Haremos un botón simple, Click to display, que activará una función en el evento de clic.
La función usará el método call(), y mostraremos un resultado de texto combinado usando objetos que contienen múltiples valores de cadena como pares clave-valor. Simplemente combinará cadenas del objeto dado pasando un parámetro usando el método call().
El resultado se mostrará como un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>
call() method Example
</title>
</head>
<body style = "text-align:center;">
<h1 >
Click on "Click to display" for display combined Text using call()
</h1>
<button onClick="fun()">
Click to display
</button>
<p id="mypara"></p>
<!-- Script tags to use call() method to call
function -->
<script>
function fun() {
let object_b = {
combinedText: function(text1, text2) {
return this.firstName + " " + this.lastName
+ " " + text1 + " " + text2;
}
}
let object_a = {
firstName:"DelftStack",
lastName: "Technology",
}
let x = object_b.combinedText.call(object_a, "is", "Best");
document.getElementById("mypara").innerHTML = x;
}
</script>
</body>
</html>
En la fuente de la página HTML anterior, puede ver un botón simple botón Click to display que llama a la función fun().
En el cuerpo fun() se inicializa con otro método combinedText en object_b. Devuelve una cadena concatenada de parámetros pasados.
Otro objeto inicializado objeto_a que contiene múltiples cadenas como un valor-clave usando los parámetros call() (object_a,"is","best"). Ambos se concatenan en la cadena y devuelven el resultado.
El resultado se muestra mediante getElementById().
Forma alternativa utilizando el método apply()
Los mismos resultados se pueden lograr con el método apply(). Puede usar el método apply() pasando un array de argumentos en lugar de argumentos separados por comas object_b.combinedText.apply(object_a, ["is", "Best"]).
<script>
function fun() {
let p = {
combinedText: function(text1, text2) {
return this.firstName + " " + this.lastName
+ ", " + text1 + ", " + text2;
}
}
let object_a = {
firstName:"DelftStack",
lastName: "Technology",
}
let x = p.combinedText.apply(object_a, ["Is", "Best"]);
document.getElementById("mypara").innerHTML = x;
}
</script>
En el ejemplo anterior, el método x = object_b.combinedText.apply() se usa con los parámetros (object_a,[array_arguments]).
En el siguiente paso, debemos agregar la variable de resultado en el id de párrafo mypara para mostrar el valor en la página HTML.