L’indirect invocation in JavaScript

Invocare una funzione tramite i metodi call() e bind() consente di specificare il contesto di esecuzione della funzione e determinare il valore del riferimento this

Si parla di Indirect Invocation quando una funzione è chiamata utilizzando i metodi .call() oppure .apply().

In JavaScript le funzioni sono degli oggetti di tipo Function e tra i metodi messi a disposizione troviamo .call() e .apply() che sono usate per invocare le funzioni specificando il contesto da utilizzare. Nello specifico:

  • Il metodo .call(thisArg[, arg1[, arg2[, …]]]) accetta come primo parametro il contesto dell’invocazione mentre i parametri successivi sono sono una lista di argomenti da passare alla funzione;
  • Il metodo .apply(thisArg, [arg1, arg2, …]) accetta come primo parametro il contesto dell’invocazione mentre il parametro successivo è un array con gli argomenti da passare alla funzione.

Vediamo un esempio:

    function sum(number1, number2) {
        console.log(this === window); // => true
        return number1 + number2;
    }
    console.log(sum.call(window, 10, 20)); // => 30
    console.log(sum.apply(window, [10, 20])); // => 30

Entrambi le invocazioni di funzione restituisono 30, la loro principale differenza è solo nel modo in cui passano i parametri alla funzione. In entrambe come primo parametro viene passato undefined, di conseguenza il valore di this all’interno della funziona è undefined.

Nelle indirect invocation il valore di this è impostato dal valore del primo argomento di .call() e .apply().

Vediamo un esempio:

    var myObject = {name: 'MyObj'};
    function myFunction() {
        console.log(this === myObject); // => true
    };
    myFunction.call(myObject);
    myFunction.apply(myObject);

L’indirect invocation è molto utile perché consente di specificare il contesto delle funzioni, consente quindi di poter risolvere il problema di contesto nelle function invocation dove this vale sempre window (o undefined nella strict mode).

Un altro caso in cui le invocation function risultano molto vantaggiose è nella creazione gerarchica delle classi in ES5 per chiamare il costruttore della classe padre:

    function Person(name) {
        console.log(this instanceof Male); // => true
        this.name = name;
    }
    function Male(name) {
        console.log(this instanceof Male); // => true
        Person.call(this, name); // Indirect invocation. Chiama il costruttore del padre
    }
    var myMale = new Male('Datrevo');
    console.log(myMale); // => { name: 'Datrevo'}

All’interno di Male, viene richiamato il costruttore del padre passandogli il contesto dell’oggetto appena creato. Scrivendo una function invocation, con Person(this.name), il nome della persona verrebbe aggiunto a window e non all’oggetto Male.

Indice:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *