Esto, BIND, LLAME Y APLICACIÓN EN JAVASCRIPT | Explicado

Bind, llame y aplicar son métodos realmente útiles y especiales que nos ayudan a lograr prestado características y métodos de un objeto a otro utilizando la referencia "este". Este es un poco de tema avanzado, es por eso que vamos a tomar las cosas con calma para usted y explicar cada minuto detalle con ejemplos.

JavaScript y muchos otros lenguajes de programación usan la palabra clave este para pasar la referencia del objeto/clase principal a sus funciones y métodos dentro de ellos. Mientras que los métodos de enlace, llaman y aplican los métodos sobre el paso de referencia a los atributos de préstamo de un objeto a otro. La función de enlace, llamada y aplicación se agregó en JavaScript en la versión ECMA2015.

La referencia "esta"

La palabra clave este tiene un significado muy específico en JavaScript, se refiere al objeto que está llamando a la función. Si estamos trabajando con un método de constructor, entonces la palabra clave este se referiría a la clase y sus propiedades, si estamos trabajando con algunos elementos dom este La palabra clave se referiría a los valores globales del DOM.

Para demostrar esto, cree el siguiente objeto usando las siguientes líneas:

Var Person =
Nombre: "John Doe",
Edad: 25,
Designación: "Auditor",
printname: function ()
consola.Log (esto.nombre);
,
;

Como puede ver, dentro de la persona del objeto tenemos una función nombre de impresión que imprimirá el nombre de la persona y dentro del consola.registro() Podemos ver que tenemos la línea:

este.nombre;

Este La palabra clave está creando una referencia al objeto y le dice al compilador que obtenga el "nombre" de este objeto particular.

Llamar y aplicar métodos

Llamar y aplicar se pueden definir simultáneamente ambos porque tienen casi exactamente la misma mecánica de trabajo. Llamar y aplicar se utilizan para el préstamo de funciones, préstamos de funciones significa usar la función de algún otro objeto y usar la referencia de algún otro objeto.

Para comprender mejor este concepto, cree dos objetos diferentes utilizando las siguientes líneas de código:

Var Person1 =
Nombre: "John Doe",
Edad: 25,
Designación: "Auditor",
printname: function ()
consola.Log (esto.nombre);
,
;
var persona2 =
Nombre: "Baba Yaga",
Edad: 22,
Designación: "desempleado",
;

Como puede ver en el fragmento de código, tenemos casi la misma estructura de los objetos y los mismos pares de valor clave, excepto por el hecho de que persona1 tiene la función nombre de impresión mientras persona2 no es. Pero si quieres imprimir el "nombre" del persona2 objeto, puede hacerlo utilizando el método "printname" desde el persona1 objeto, y para el "este"Referencia, pasa en la referencia del objeto persona2.

Sintaxis de llamadas y aplicar:

La sintaxis de ambos métodos es casi idéntica:

Para el método de llamada, la sintaxis es como:

obj1.función.llamar (referenceOfObject2, arg1 arg2, arg3 ...);

Para el método de aplicación, la sintaxis es como:

obj1.función.aplicar (referenceOfObject2, [arg1, arg2, arg3, ...]);

Nota: Si la función que está tomando prestada necesita algunos argumentos adicionales, entonces en el Método de llamadas Pase los argumentos separados por una coma "", y en el caso del método de aplicación, aprueba argumentos adicionales como un lista de arreglo.

Uso de métodos de llamada y aplicación

Volviendo a nuestro problema original, podemos usar el "nombre de impresión"Función del"persona1"Objetar imprimir el nombre del persona2 Objeto usando la siguiente línea de código:

persona1.nombre de impresión.llamar (persona2);

Si ejecuta el comando anterior, verá la siguiente salida:

Del mismo modo, puedes usar el aplicar() Método para el mismo propósito utilizando el código:

persona1.nombre de impresión.aplicar (persona2);

Pero, ¿y si el printname () La función está tomando algunos argumentos como:

printname: function (ciudad, hermanos)
consola.log ('$ this.nombre de $ City tiene $ hermanos hermanos ');
,

Para este caso, usará la función de llamada con la siguiente línea de código:

persona1.nombre de impresión.llamar a (persona2, "Nueva York", 4);

El fragmento de código completo es como:

Var Person1 =
Nombre: "John Doe",
Edad: 25,
Designación: "Auditor",
printname: function (ciudad, hermanos)
consola.log ('$ this.nombre de $ City tiene $ hermanos hermanos ');
,
;
var persona2 =
Nombre: "Baba Yaga",
Edad: 22,
Designación: "desempleado",
;
persona1.nombre de impresión.llamar a (persona2, "Nueva York", 4);

Si ejecuta el siguiente código, obtendrá la salida como:

Como puede ver, pudo pasar los argumentos utilizando el método de llamada, puede hacerlo utilizando el aplicar() Método también mediante el siguiente fragmento de código:

Var Person1 =
Nombre: "John Doe",
Edad: 25,
Designación: "Auditor",
printname: function (ciudad, hermanos)
consola.log ('$ this.nombre de $ City tiene $ hermanos hermanos ');
,
;
var persona2 =
Nombre: "Baba Yaga",
Edad: 22,
Designación: "desempleado",
;
persona1.nombre de impresión.aplicar (persona2, ["Nueva York", 4]);

Nota: para pasar argumentos a la función prestada a través de la aplicar() Método, estamos utilizando una matriz que contiene los argumentos.

Si ejecuta este código, obtendrá la misma salida idéntica que:

Pero, ¿qué pasa si no quieres tomar prestada una función de algún objeto?? Aquí es donde el Método de enlace entra en juego.

El método bind ()

A diferencia del llamar y aplicar métodos, unir Los métodos se utilizan para crear una copia de una función y luego colocar esa función copiada como un atributo del objeto para que la función se pueda usar en un momento posterior.

Sintaxis del método de enlace

La sintaxis es como:

var newFunctionName = Object1.función.enlace (referToObject2);

Nota: El método de enlace devuelve una función que se replica.

Para demostrar esto, alteremos el código del ejemplo anterior de esta manera:

Var Person1 =
primer nombre: "John",
LastName: "Doe",
Edad: 25,
imprimfullname: functer ()
consola.Log (esto.FirstName + "" + esto.apellido);
,
;
var persona2 =
primer nombre: "Baba",
LastName: "Yaga",
Edad: 25,
;

Ahora si desea hacer una copia de la función nombre de imprenta del objeto persona1 y hazlo un atributo del objeto persona2 Entonces puede hacerlo usando la siguiente línea de código:

var printmyname = persona1.nombre de imprenta.Bind (persona2);

Con esta línea, tienes "vínculo"Una función de atributo printmyname con el objeto persona2, y puedes invocarlo usando el comando:

printmyname ()

Nota: no lo está llamando con el persona2 objeto usando el punto-operado porque la referencia al persona2 el objeto ya es "vínculo"A la función.

El fragmento de código completo es como:

Var Person1 =
primer nombre: "John",
LastName: "Doe",
Edad: 25,
imprimfullname: functer ()
consola.Log (esto.FirstName + "" + esto.apellido);
,
;
var persona2 =
primer nombre: "Baba",
LastName: "Yaga",
Edad: 25,
;
var printmyname = persona1.nombre de imprenta.Bind (persona2);
printmyname ();

Cuando ejecuta este fragmento de código, obtiene el siguiente resultado:

Ahí tienes, has duplicado una función de persona1 objeto, pasó la referencia de persona2 objeto, y lo almacenó como una función separada.

Conclusión

Llamar, atar y aplicar Los métodos son métodos complicados que se utilizan para jugar con la referencia de los objetos y lo ayudan a lograr hazañas como el préstamo de funciones y la replicación de funciones con una referencia diferente. Para comprender los detalles de estas funciones, necesitamos saber cuál es la palabra clave este significa en JavaScript y cómo funciona la referencia en JS. Aprendiste sobre el funcionamiento de este, llamar, aplicar y vincular métodos junto con sus ejemplos.