La function invocation in JavaScript

Tramite l’invocazione di una funzione il riferimento this punterà all’oggetto globale, mentre nella strict mode vale undefined

In JavaScript si parla di “invocazione di funzione” (Function Invocation) quando l’oggetto funzione è seguita dalle parentesi tonde (con eventualmente all’interno una lista di argomenti), ad esempio: hello(‘Datrevo’). Si parla sempre di invocazione di funzione per l’IIFE (Immediately-Invoked Function Expression):

    var message = (function(name) {
        return 'Hello ' + name;
    })('Datrevo');
    console.log(message) // => 'Hello Datrevo'

Possiamo dire che:

Nelle function invocation: this punta all’oggetto globale.

Dato che this dipende dall’ambiente di esecuzione della funzione, in un browser this punterà a window.

    var whichIsThis = function () {
        console.log(this === window); // => true
    };
    whichIsThis();

Operando con this aggiungeremo delle proprietà a window:

    function myFunction() {
        this.myNumber = 20; // Aggiunge "myNumber" all'oggetto globale
    }
    // myFunction() è invocato come una funzione, quindi
    // this al suo interno è l'oggetto globale (window)
    myFunction();
    console.log(window.myNumber); // => 20

Anche al di fuori di una funzione this fa riferimento all’oggetto all’oggetto globale.

    console.log(this === window); // => true

Le function invocation con la strict mode

Nelle function invocation nella strict mode: this è undefined.

Abilitando la strict mode, una variamente più restrittiva di JavaScript, il contesto di esecuzione di una funzione invocata non è più l’oggetto globale (window) ma undefined.

    function myFunction() {
        'use strict';
        console.log(this === undefined); // => true
    }
    myFunction();

Per le inner function (funzioni interne) il valore di this non è automaticamente lo stesso delle funzioni esterne in cui sono contenute, ma dipende sempre dal modo in cui vengono invocate.

Definiamo un oggetto myObject con due proprietà di cui una è una funzione:

    var myObject = {
        myName: "Datrevo",
        method: function() {
            console.log("Outer: " + this.myName); // => Datrevo

            function myInnerFunction() {
            console.log("Inner: " + this.myName); // => undefined
            }
            myInnerFunction();
        }
    };
    myObject.method();

Nella funzione method l’oggetto è un metodo quindi this punta all’oggetto stesso, quindi con console.log(“Outer: ” + this.myName); verrà stampato “Outer: Datrevo”.
Al contrario, dato che myInnerFunction() è invocata come una funzione gli viene passato l’oggetto globale (window) come riferimento di this. Dato che in window non è presente l’oggetto name verrà stampato undefined.

Una possibile soluzione al differente riferimento di this nelle inner function, è quello di sfruttare la possibilità delle funzioni interne di accedere alle proprietà della funzione in cui sono contenute. Ad esempio salvando in una nuova proprietà il “corretto” riferimento a this nelle funzioni interne:

    var myObject = {
        myName: "Datrevo",
        method: function() {
            console.log("Outer: " + this.myName); // => Datrevo

            var correctThis = this;
            function myInnerFunction() {
                console.log("Inner: " + correctThis.myName); // => Datrevo
            }
        myInnerFunction();
        }
    };
    myObject.method();

In questo esempio si è memorizzato il valore di this in una variabile locale correctThis che sarà accessibile dalla funzione interna.

Un’altra possibilità per far puntare correttamente il this delle funzioni internet allo stesso valore delle funziona esterne è quella di sfruttare settare manualmente il contesto di applicazione della funzione (Indirect Invocation).

Indice:

Pubblicato in Front-end, JavaScript Taggato con: , , , , , ,

Lascia un commento

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

*