Métodos de JavaScript Function apply() y bind()

Shiv Yadav 12 octubre 2023
  1. Método Function.apply() de JavaScript
  2. Método Function.bind() de JavaScript
Métodos de JavaScript Function apply() y bind()

Este tutorial le enseñará cómo utilizar los métodos apply() y bind() del tipo de función de JavaScript.

Método Function.apply() de JavaScript

Puede invocar una función utilizando una matriz de parámetros específicos y un valor this dado utilizando el método Function.prototype.apply(). La sintaxis de la función aplicar() es la siguiente:

Function.apply(thisArg, [args]);

Se pueden enviar dos parámetros a la función aplicar(). El parámetro thisArg es el valor de this proporcionado para la llamada a la función, y el argumento args es una matriz que define los argumentos de la función.

El parámetro args puede ser un objeto de matriz o un objeto similar a una matriz desde ES5.

Similar al método call(), el método apply() acepta los parámetros de la función como una matriz en lugar de argumentos individuales.

Veamos algunos ejemplos usando el método apply(). Suponga que tiene un objeto indivi y una función de saludo llamada gt de la siguiente manera:

const indivi = {
  fName: 'Shiv',
  lName: 'Yadav',
};
function gt(wave, sms) {
  return `${wave} ${this.fName}. ${sms}`;
}
let output = gt.apply(indivi, ['Hello', 'Where are you going?']);
console.log(output);

Ejecutar código

wave y sms son los dos argumentos que toma el método gt(). Nos referimos a un objeto con el campo fName dentro de la función gt().

El método apply() se puede usar para invocar la función gt() con this establecido en un objeto individual usando el siguiente ejemplo:

Producción :

"Hello Shiv. Where are you going?"

El ejemplo anterior establece el objeto indivi como valor este dentro de la función. El método apply() recibió los parámetros de la función gt() como un array.

La función gt() fue llamada por el método apply(), con los parámetros como un array ["Hola", "¿Adónde vas?"] y este valor se establece en el objeto indivi .

Método Function.bind() de JavaScript

La palabra clave this de la nueva función creada por el método bind() se establece en el valor proporcionado cuando se invoca. Aunque trata genuinamente de muchos más temas, lo dejaremos para otro momento.

Esto tiene mucho poder. Invocar una función nos permite declarar el valor de esto explícitamente.

Examinemos el código:

var indivi = {
  fName: 'Shiv',
  lName: 'Yadav ',
  getIndiviName: function() {
    var fName = this.fName + ' ' + this.lName;
    return fName;
  },
};

var indiviName = function() {
  console.log(this.getIndiviName() + 'Where are you Going ?');
};

var logName = indiviName.bind(indivi);

logName();

Ejecutar código

Vamos a diseccionarlo. El motor JS crea una nueva instancia de indiviName y vincula indivi como esta variable cuando usamos la función bind(). Es crucial darse cuenta de que duplica la función indiviName.

Aunque logName() no estaba originalmente en el objeto indivi, ahora puede llamarse después de duplicar la función indiviName. Ahora podrá identificar sus atributos (Shiv y Yadav) y sus prácticas.

La parte importante es que después de que se ha vinculado un valor, podemos utilizar la función como lo haríamos con cualquier otra función regular.

Producción :

"Shiv Yadav Where are you Going ?"
Autor: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

Artículo relacionado - JavaScript Function