Métodos bind, call y apply

Clase 24 de 80Curso de JavaScript Desde Cero

Contenido del curso

Primeros Pasos

Funciones y This

Resumen

¿Cómo manipular el contexto de ejecución de una función?

Cuando programamos en JavaScript, una de las habilidades clave que debemos dominar es la capacidad de manipular el contexto de ejecución de una función, es decir, el uso adecuado del this. Esta habilidad no solo mejora nuestra comprensión del lenguaje, sino que también optimiza nuestras habilidades para resolver problemas. A continuación, exploraremos tres métodos fundamentales que nos permitirán lograr esto de manera eficaz: call, apply y bind.

¿Cómo usar el método call?

El método call nos permite establecer explícitamente el contexto (this) de una función en el momento en que se llama. Esto es especialmente útil cuando necesitamos ejecutar una función con un contexto específico que difiere de su contexto original.

  1. Definición de la función
    Comenzamos creando una función de saludo para un perro:

    function dogGreeting(owner, address) { console.log(`Hola, soy ${this.dogName} y vivo con ${owner} en ${address}`); }
  2. Creación de un objeto
    Definimos un objeto que contiene el nombre del perro:

    const newHouse = { dogName: 'Coconut' };
  3. Ejecución con call
    Utilizamos call para ejecutar la función con el objeto newHouse como contexto y pasamos los parámetros necesarios:

    const owner = 'Lucy'; const address = '123 Avenue'; dogGreeting.call(newHouse, owner, address);

    Esto producirá: "Hola, soy Coconut, y vivo con Lucy en la avenida 123."

¿Cómo funciona apply de manera diferente a call?

El método apply es similar al call, pero difiere en cómo recibe los parámetros. En lugar de pasar los argumentos de forma individual, apply los recibe como un array.

  1. Creación de un array de parámetros
    Agrupamos los parámetros que la función requiere:

    const necessaryValues = [owner, address];
  2. Ejecución con apply
    Ahora llamamos a la función usando apply, pasando el contexto y el array de parámetros:

    dogGreeting.apply(newHouse, necessaryValues);

    El resultado sigue siendo el mismo, pero esta vez los argumentos se pasan de manera agrupada.

¿Cuál es el propósito de bind?

El método bind, a diferencia de call y apply, no ejecuta la función inmediatamente. En su lugar, devuelve una nueva función con un contexto fijado, que podemos ejecutar más adelante a demanda.

  1. Creación de la función vinculada
    Creamos una nueva función vinculando el contexto usando bind:

    const bindingWithBind = dogGreeting.bind(newHouse, owner, address);
  2. Ejecución de la función
    Finalmente, podemos ejecutar esta nueva función en cualquier momento:

    bindingWithBind();

    Esto nos da flexibilidad para ejecutar la función cuando sea necesario y con el contexto correcto.

Factores a considerar al elegir el método adecuado

  • call: Útil para ejecutarse inmediatamente cuando conocemos los parámetros individuales de antemano.
  • apply: Práctico cuando los parámetros están organizados dentro de un array.
  • bind: Perfecto cuando la ejecución de la función se debe postergar para un momento específico o cuando se quiere crear una función con un contexto predeterminado.

Elegir el método correcto puede mejorar la eficiencia de tu código y la flexibilidad de las funciones durante la ejecución. ¡Sigue explorando y experimentando para dominar este poderoso aspecto de JavaScript!