Cómo usar los métodos apply (?), Call (?) Y bind (➰) en JavaScript

En este artículo, hablaremos sobre los métodos de aplicación, llamada y vinculación de la cadena de prototipos de funciones. Son algunos de los conceptos más importantes y más utilizados en JavaScript y están muy relacionados con la palabra clave this .

Por lo tanto, para comprender la información de este artículo, primero debe familiarizarse con el concepto y el uso de la palabra clave this . Si ya está familiarizado con él, puede continuar; de lo contrario, puede consultar este artículo aquí y luego volver aquí.

Para aprender sobre apply | call | bind , también necesitamos conocer las funciones en JavaScript, asumiendo que está familiarizado con esto .

Funciones

El constructor de función crea un nuevo objeto de función. Llamar al constructor directamente puede crear funciones dinámicamente, que se pueden ejecutar en el ámbito global.

Como las funciones son objetos en JavaScript, su invocación está controlada por los métodos de aplicación, llamada y vinculación .

Para verificar si una función es un objeto de función, podemos usar el código en el siguiente fragmento, que devuelve verdadero.

El objeto de función global no tiene métodos ni propiedades propios. Sin embargo, dado que es una función en sí misma, hereda algunos métodos y propiedades a través de la cadena de prototipos de Function.prototype. - MDN

Los siguientes son los métodos en la cadena de prototipos de funciones:

  • Function.prototype.apply ()
  • Function.prototype.bind ()
  • Function.prototype.call ()
  • Function.prototype.isGenerator ()
  • Function.prototype.toSource ()
  • Object.prototype.toSource
  • Function.prototype.toString ()
  • Object.prototype.toString

Nos preocupan los tres primeros, así que comencemos.

Aplicar ?

La aplicar () método es un método importante del prototipo de función y se usa para llamar a otras funciones con un proporcionado este valor de palabra clave y los argumentos presentados en forma de matriz o una matriz como objeto.

Los objetos tipo matriz pueden hacer referencia a NodeList o al objeto de argumentos dentro de una función.

Esto significa que podemos llamar a cualquier función y especificar explícitamente lo que este debe hacer referencia a la función que llama.

Sintaxis

Regreso

Devuelve el resultado de la función que invoca .

Descripción

El método de aplicación se utiliza para permitir que una función / objeto perteneciente a un objeto x sea llamado y asignado a un objeto y.

Ejemplos

1.

Como se ve en el fragmento dado, vemos que cuando insertamos una matriz dentro de otra, toda la matriz se trata como un elemento y se inserta dentro de la variable de matriz.

Pero, ¿qué pasa si queremos que los elementos se inserten individualmente en lugar de como una matriz? Seguro que hay literalmente n formas de hacerlo, pero a medida que aprendemos a aplicar, usémoslo:

En el ejemplo dado, podemos ver el uso de aplicar al unir dos matrices dadas. La matriz de argumentos es la matriz de elementos y este argumento apunta a la variable de matriz. Los elementos de la matriz elementos son empujados al objeto ( array ) a la que la presente esseñalando . Obtenemos el resultado como elementos individuales de la segunda matriz empujados a la matriz a la que el presente es puntiagudo.

2.

La función max en JS se usa para encontrar el elemento con el valor máximo de un grupo de elementos dado. Pero como podemos ver en el fragmento, si los valores están en forma de matriz, obtenemos el resultado como NaN. Seguramente estamos hablando de JavaScript, así que de nuevo, hay n varias formas de hacerlo, pero usemos aplicar.

Ahora, cuando usamos apply y usamos la función Math.max (), obtenemos el resultado. Como sabemos, la aplicación tomará todos los valores dentro de la matriz como argumentos individuales y luego se les aplicará la función max. Esto nos dará el valor máximo en la matriz.

Una cosa interesante para señalar aquí es que en lugar de esto hemos usado null. Como el argumento proporcionado es la matriz número, incluso si este se introduce apuntará a la misma matriz y vamos a obtener el mismo resultado. Por lo tanto, en tales casos, podemos usar null en lugar de this. Esto nos muestra que este argumento en la función de aplicación es un argumento opcional.

Llamada

El método call () se usa para llamar a una función con un esto dado y los argumentos que se le proporcionan individualmente.

Esto significa que podemos llamar a cualquier función, especificando explícitamente la referencia que este debe hacer referencia a la función que llama.

Esto es muy similar a aplicar, la única diferencia es que aplicar toma argumentos en forma de una matriz u objetos similares a una matriz, y aquí los argumentos se proporcionan individualmente.

Sintaxis

Regreso

El resultado de llamar a la función con el thisvalor y los argumentos especificados .

Descripción

El método de llamada se utiliza para permitir que una función / objeto perteneciente a un objeto x sea llamado y asignado a un objeto y.

Ejemplos

1.

Este es un ejemplo de encadenamiento de constructores. Como podemos ver, en cada función se llama al constructor del Producto, y usando call las propiedades del objeto Producto se encadenan con los objetos Pizza y Juguete, respectivamente.

Cuando se crean nuevas instancias de los objetos Pizza y Toy, se proporcionan parámetros como nombre, precio y categoría. La categoría se aplica solo en la definición, pero el nombre y el precio se aplican utilizando el constructor encadenado del objeto Producto, tal como se definen y aplican en el objeto Producto. Con un poco más de ajustes podemos lograr la herencia.

2.

En el fragmento anterior, definimos una función llamada dormir. Consiste en una respuesta de matriz que consta de elementos que se dirigen a las propiedades utilizando la palabra clave this . Se definen en un objeto separado fuera de la función.

La función sleep se llama con el objeto obj como argumento. Como podemos ver, las propiedades del obj se establecen en this.animal y this.sleepDuration, respectivamente, y obtenemos la oración completa como salida.

Enlazar➰

El método bind () crea una nueva función que, cuando se llama, tiene su thispalabra clave establecida en el valor proporcionado, con una secuencia dada de argumentos que preceden a los proporcionados cuando se llama a la nueva función. - MDN

Sintaxis

Regreso

Bind devuelve una copia de la función con el esto y los argumentos proporcionados.

Descripción

La función de vinculación es muy similar a la función de llamada , con la principal diferencia de que vincular devuelve una nueva función, mientras que la llamada no.

De acuerdo con las especificaciones de ECMAScript 5, la función devuelta por bind es un tipo especial de objeto de función exótica (como lo llaman) llamado función Bound (BF) . El BF envuelve el objeto de función original. Llamar a un BF ejecuta la función envuelta en él.

Ejemplos

1.

En el fragmento anterior, hemos definido una variable x y un objeto llamado módulo. También contiene una propiedad llamada x y otra propiedad cuyo valor correspondiente es una función que devuelve el valor de x .

Cuando se llama a la función getX , devuelve los valores de x que se definen dentro del objeto y no la x en el ámbito global.

Se declara otra variable en el ámbito global que llama a la función getX desde el objeto del módulo . Pero como la variable está en el alcance global, esto en getX apunta a la x global y, por lo tanto, se devuelve 9.

Se define otra variable que llama a la función anterior pero esta vez vincula dicha función con el objeto del módulo . Este enlace devuelve el valor de x dentro del objeto. Debido a la vinculación, esto en la función apunta al valor de x en el objeto y no a la x global . Por lo tanto, obtenemos 81 como salida

Conclusión

Ahora que hemos aprendido los conceptos básicos sobre los métodos, es posible que todavía esté un poco confundido acerca de por qué hay 3 funciones diferentes que hacen casi lo mismo. Para aclarar este concepto, debes practicar con diferentes situaciones y escenarios para que puedas aprender más a fondo dónde y cómo se pueden usar. Seguramente harán que su código sea más limpio y potente.

Si te gustó este artículo, ¿aplaudir? ¿y siga? para más.