En JavaScript, hay varias formas de cambiar el contexto de ejecuci n de una funci n. Una de esas formas son los m todos bind, call y apply. Comprender las diferencias entre los dos es un aspecto importante para que un desarrollador los ayude a usar estas t cnicas en sus proyectos de la manera m s eficiente y flexible posible.
El m todo bind se utiliza para crear una nueva funci n, con un contexto de ejecuci n asociado. No llama a la funci n inmediatamente, sino que devuelve una nueva funci n que, cuando se llama, usar el contexto pasado. Bind tambi n le permite pasar argumentos que ser n fijos para la nueva funci n.
Los m todos call y apply le permiten llamar a una funci n especificando un contexto espec fico. Llaman a la funci n de inmediato sin crear una nueva. La diferencia entre los dos es c mo aceptan los argumentos. El m todo call toma una lista de argumentos pasados a la funci n uno por uno. Mientras que el m todo apply toma los argumentos como una matriz o una pseudo matriz.
Comprender las diferencias entre bind, call y apply le permitir utilizar estas t cnicas de manera m s flexible y eficiente en sus proyectos. Podr controlar mejor el contexto de ejecuci n de funciones y simplificar el c digo, haci ndolo m s comprensible y legible.
- Diferencias entre bind, call y apply en JavaScript
- Modo de funcionar
- Uso de bind
- Uso de call
- Uso apply
- Diferencias en la transmisi n de argumentos
- Ejemplos de uso
- Conclusi n
- Pregunta-respuesta
- Cu les son las diferencias entre los m todos bind, call y apply en JavaScript?
- Cu ndo debo usar el m todo bind?
- C mo funciona el m todo call?
- C mo funciona el m todo apply?
Diferencias entre bind, call y apply en JavaScript
bind es un m todo que permite "anclar" un valor espec fico a la palabra clave this cuando se llama a la funci n. Crea una nueva funci n que se llamar con el valor vinculado de this. El m todo bind no llama a la funci n de inmediato, solo devuelve una nueva funci n. Esto es muy til cuando necesita pasar una funci n como una devoluci n de llamada o asignar una funci n como un m todo de objeto, manteniendo su enlace al objeto deseado.
call es un m todo que le permite llamar a una funci n con un valor espec fico pasado para la palabra clave this y un conjunto de argumentos. A diferencia del m todo bind, el m todo call llama a la funci n de inmediato. El m todo call se puede usar para llamar a funciones con un contexto espec fico cuando se necesitan m todos de objeto en otro objeto, o para llamar a funciones que esperan que el contexto se pase a trav s de this.
apply es un m todo que le permite llamar a una funci n con un valor espec fico pasado para la palabra clave this y la matriz de argumentos. A diferencia del m todo call, el m todo apply toma los argumentos como una matriz en lugar de los argumentos enumerados. Esto puede ser til si los argumentos ya est n en una matriz o si su n mero es desconocido de antemano.
Los tres m todos (bind, call y apply) le permiten controlar el contexto de la llamada a la funci n. Sin embargo, la elecci n entre ellos depende de las necesidades espec ficas y la facilidad de uso. Si desea crear una funci n con un valor this vinculado y pasarlo como callback, es mejor usar bind. Si desea llamar a una funci n con un contexto y un conjunto de argumentos espec ficos, puede usar call o apply, dependiendo del formato de paso de los argumentos.
- bind-crea una nueva funci n con el valor vinculado this
- call-llama a una funci n con un determinado valor this y un conjunto de argumentos
- apply-llama a una funci n con un determinado valor this y una matriz de argumentos
Modo de funcionar
Los m todos bind, call y apply est n dise ados para cambiar el contexto de ejecuci n de una funci n en JavaScript.
- bind crea una nueva funci n vincul ndola al objeto especificado. Como resultado de llamar a esta nueva funci n, el contexto de ejecuci n ser el objeto especificado.
- call llama a una funci n con el contexto especificado y los argumentos pasados (separados por comas).
- apply llama a una funci n con el contexto especificado y los argumentos pasados como una matriz.
Los tres m todos le permiten especificar expl citamente en qu objeto se ejecutar la funci n. Como resultado, el contexto de ejecuci n de la funci n cambia, y dentro de la funci n se puede hacer referencia a las propiedades y m todos del objeto especificado.
A diferencia de bind, call y apply llaman a la funci n inmediatamente. .
, bind:
var obj = { name: "John" };
function sayHello() {
console.log("Hello, " + this.name);
}
var sayHelloBound = sayHello.bind(obj);
sayHelloBound(); // "Hello, John"
call apply:
var obj = { name: "John" };
function sayHello() {
console.log("Hello, " + this.name);
}
sayHello.call(obj); // "Hello, John"
sayHello.apply(obj); /"Hola, John"
En ambos casos, la funci n se llama con el contexto obj y sus propiedades y m todos est n disponibles dentro de la funci n.
Los m todos call y apply son especialmente tiles cuando se debe llamar a una funci n con argumentos que se deben pasar como una matriz o cuando se llama a una funci n, no es posible definir todos los argumentos de antemano.
Uso de bind
El m todo bind crea una nueva funci n que vincula un contexto espec fico (this) y, si es necesario, los argumentos iniciales.
Sintaxis del m todo bind:
function.bind(thisArg[, arg1[, arg2[, ...]]])
Cuando se llama a una funci n enlazada con bind, el contexto this har referencia al par metro thisArg pasado en este m todo. Adem s, si es necesario, puede pasar argumentos iniciales que ser n fijos cuando se llame a una nueva funci n.
Ejemplo de uso de bind:
// Crear un objeto person
var person = {
name: "John",
age: 30
};
// Crear una funci n sayHello utilizando el m todo bind
var sayHello = function() {
console.log ("hola, mi nombre" + this.name + "y yo" + this.age + " a os.");
}.bind(person);
// Llamar a la funci n sayHello
sayHello (); / / Salidas: hola, mi nombre es John y tengo 30 a os.
En el ejemplo anterior, creamos un objeto person con dos propiedades: name y age. Luego creamos la funci n sayHello con el m todo bind, y el contexto this dentro de esa funci n se vincula al objeto person. Cuando se llama a la funci n sayHello, genera un saludo con el nombre y la edad del objeto person.
Por lo tanto, el uso del m todo bind nos permite vincular una funci n a un objeto y contexto espec fico, lo que permite un trabajo m s flexible con las funciones en JavaScript.
Uso de call
El m todo call permite llamar a una funci n especificando otro objeto en el contexto de ejecuci n.
Sintaxis:
function.call(thisArg, arg1, arg2, ...)
donde:
- dentro de la funci n llamada.
- arg1, arg2, ... son los argumentos que se pasar n a la funci n.
Ejemplo de uso:
const person = {
name: 'John',
age: 30
};
function introduce() {
console.log(`My name is ${this.name} and I'm ${this.age} years old.`);
}
introduce.call(person);
El resultado de la ejecuci n ser :
My name is John and I'm 30 years old.
.
El m todo call tambi n permite el uso de funciones de otros objetos en el contexto actual:
const person1 = {
name: 'Rachel',
edad: 28
};
constante persona2 = {
nombre: 'Emily',
edad: 32
};
funci n introducir (person2Name) {
consola.log ('Mi nombre es {{this.name} y yo soy {{esto.edad} a os. Encantado de conocerte, {{person2Name}!`);
}
pres ntame.llamar (persona1, person2.name);
:
Mi nombre es Rachel y tengo 28 a os. Encantado de conocerte, Emily!
.
Uso apply
El m todo apply es una forma de llamar a una funci n en JavaScript. Es similar al m todo call, pero toma argumentos como una matriz.
La sintaxis del m todo apply es la siguiente:
| M todo | Descripci n |
|---|---|
| function.apply(thisArg, [argsArray]) | Llama a una funci n con el valor especificado this y los argumentos representados como una matriz. |
Como primer argumento, el m todo apply especifica el objeto que se usar como el valor de this dentro de la funci n llamada. El segundo argumento es una matriz de argumentos que se pasar a la funci n llamada.
Por ejemplo, tenemos una funci n suma que suma dos n meros:
function sum(a, b) {
return a + b;
}
Podemos llamar a esta funci n usando el m todo apply de la siguiente manera:
var numbers = [2, 3];
var result = sum.apply(null, numbers); // 5
En este ejemplo, pasamos null como el valor de this, ya que la funci n sum no usa this. Luego pasamos una matriz de numbers como argumentos para pasar a la funci n sum.
El m todo apply tambi n es til cuando se llama a una funci n con un n mero variable de argumentos:
function multiply() {
var result = 1;
for (var i = 0; i < arguments.length; i++) {
result *= arguments[i];
}
return result;
}
var args = [2, 3, 4];
var result = multiply.apply(null, args); // 24
En este ejemplo, la funci n multiply usa un objeto arguments que contiene todos los argumentos pasados. El m todo apply le permite pasar este objeto como argumentos a la funci n multiply, lo que le permite trabajar con un n mero variable de argumentos.
Por lo tanto, el m todo apply permite llamar a funciones con el valor this especificado y la matriz de argumentos. A menudo se usa cuando se trabaja con funciones que toman un n mero variable de argumentos o cuando no se requiere el uso del valor this.
Diferencias en la transmisi n de argumentos
bind:
- crea una nueva funci n asociada a un contexto espec fico.
- - este es el valor que se usar como this cuando se llame a la funci n vinculada.
- son los argumentos que se pasar n a la funci n vinculada cuando se llame a ella.
- no llama a la funci n de inmediato, devuelve una funci n de envoltura con contexto y argumentos vinculados.
call:
- llama a la funci n vinculando el contexto y pasando los argumentos por separado.
- - este es el valor que se usar como this cuando se llame a la funci n.
- son los argumentos que se pasar n a la funci n cuando se llame.
- llama a la funci n de inmediato.
apply:
- llama a la funci n vinculando el contexto y pasando los argumentos como una matriz.
- - este es el valor que se usar como this cuando se llame a la funci n.
- - es una matriz de argumentos que se pasar a la funci n cuando se llame.
- llama a la funci n de inmediato.
pasa los argumentos como una matriz.
Ejemplos de uso
Los siguientes son ejemplos del uso de los m todos bind, call y apply en JavaScript:
- };
- console.log(' , ' + this.name);
- sayHello.call(user); // : " , John"
El m todo apply funciona de manera similar al m todo call, pero toma argumentos como una matriz. Por ejemplo:
function sayHello(greeting) {
- console.log(greeting + ', ' + this.name);
- }
const user = {
name: 'John'