Explicar los métodos call() y apply() en JavaScript

Método Call(): el método de llamada se usa básicamente para invocar la función con este objeto diferente. En JavaScript, esto se refiere a un objeto. Depende de cómo estemos llamando a una función en particular. En el ámbito global, esto se refiere a la ventana de objeto global . La función interna también se refiere a la ventana de objetos globales.

En modo estricto, cuando usamos cualquier función, esto se refiere a indefinido. En funciones como call, esto podría referirse a un objeto diferente. Con la ayuda del método de llamada , podemos invocar una función particular con diferentes objetos.

Sintaxis:

object.objectMethod.call( objectInstance, arguments )

Parámetros: Toma dos parámetros:

• ObjectInstance: Es un objeto que queremos usar explícitamente
• Argumentos: son argumentos que queremos pasar a la función de llamada

Ejemplo 1:

<script>
    const obj = {
        firstName: "First_name",
        lastName: "Last_name",
        printName: function () {
            console.log(this.firstName 
                + " " + this.lastName);
        }
    };
    obj.printName();
</script>

Producción:

First_name Last_name

Es obvio ya que estamos llamando a la función printName() con el objeto obj, por lo que debería referirse al objeto obj. Y dentro del objeto obj tenemos firstName = «First_name» y lastName = «Last_name», por lo que la salida es «First_name Last_name».

Ejemplo 2: Como sabemos, podemos hacer invocar una determinada función con diferentes objetos. Entonces podemos invocar una función, printName con diferentes objetos también.

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName() {
        console.log(this.firstName + " " + this.lastName);
    }
    printName.call(obj2);
  
</script>

Producción:

Sachin Tendulkar

En este caso, estamos usando el método de llamada para invocar la función con el objeto obj2. Entonces, en este caso , esto se estaría refiriendo al objeto obj2 . Porque esto depende de cómo estamos invocando la función. En este caso, esto no se referirá a la ventana del objeto global sino al objeto obj2.

Pasar parámetro con el método de llamada: También podemos pasar el parámetro a la función de llamada.

Ejemplo 3:

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName(profession, country) {
        console.log(this.firstName + " " 
            + this.lastName + " " +
            profession + " " + country);
    }
    printName.call(obj2, "Cricketer", "India");
</script>

Producción:

Sachin Tendulkar Cricketer India

Cuando pasamos parámetros utilizando el método de llamada, pasamos parámetros separados por comas ( , ).

Aplicar() método: Al igual que el método de llamada, también podemos vincular la función a cualquier objeto. Usando el método apply() también podemos invocar una función dada con diferentes objetos.

Sintaxis:

object.objectMethod.apply(objectInstance, arrayOfArguments)

Parámetros: Toma dos parámetros:

• ObjectInstance : es un objeto que queremos usar explícitamente
• Argumentos: son argumentos que queremos pasar a la función de llamada

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName() {
        console.log(this.firstName + " " + this.lastName);
    }
    printName.apply(obj2);
</script>

Producción:

Sachin Tendulkar

Pasar parámetros con el método de aplicación: también podemos pasar parámetros con la función de aplicación.

<script>
    const obj1 = {
        firstName: "First_name",
        lastName: "Last_name"
    };
    const obj2 = {
        firstName: "Sachin",
        lastName: "Tendulkar"
    };
    function printName(profession, country) {
        console.log(this.firstName + " "
            + this.lastName + " " +
            profession + " " + country);
    }
    printName.apply(obj2, ["Cricketer", "India"]);
</script>

Producción:

Sachin Tendulkar Cricketer India