La method invocation in JavaScript

Utilizzare una funzione come un metodo consente di far puntare il riferimento this all’oggetto a cui il metodo appartiene e non causare “strani” comportamenti

In JavaScript per metodo si intende una funzione contenuta in una proprietà di un oggetto. Ad esempio sayHello è un metodo di myObject:

    var myObject = {
        sayHello: function() {
            return 'Hello';
        }
    };
    console.log(myObject.sayHello());

Per poter accedere ai metodi di un oggeto si utilizza il “property accessor“, ovvero tramite la “dot notaion” (myObject.sayHello) o “bracket notation” (myObject[“sayHello”]).

Si parla di method invocation quando un’espressione forma un property accessor che valuta una funzione di un oggetto ed è seguita dalle parentesi tonde con eventualmente dei parametri passati al loro interno. Di conseguenza myObject.sayHello() e myObject[“sayHello”]() sono corrette invocazioni del metodo sayHello dell’oggetto myObject.

La principale differenza con le function invocation è che nella method invocation si richiede un property accessor per accedere alla funzione di un oggetto (obj.myFunc() oppure obj[“myFunc”]()), mentre nelle invocazioni di funzione è che si accede direttamente alla funzione (myFunc()). Capire la differenza tra i due tipi di invocazione consente di identificare correttamente il contesto in cui ci si trova (this).

Nelle method invocation il valore di this in una è data dall’oggetto a cui appartiene il metodo.

Ad esempio quando myMethod viene invocato, il valore che this assumerà sarà myObject:

    var myObject = {
        myMethod: function() {
            console.log(this === myObject); // => true
        }
    };
    myObject.myMethod();

Dato che this corrisponde all’oggetto, possiamo accendere alle proprietà dell’oggetto in cui ci troviamo:

    var mySite = {
        name: "Datrevo",
        sayTitleSite: function() {
            console.log(this === mySite); // => true
            return this.name;
        }
    };
    mySite.sayTitleSite(); // => Datrevo

Nel metodo sayTitleSite() si è stati in grado di accedere, tramite this, al name dell’oggetto mySite in quanto puntata all’oggetto mySite.

Nella definizione di un costruttore, ad esempio:

    function Person(surname) {
        this.surame = surname;
        this.getSurname = function () {
            console.log(this === Person); // => false
            console.log(this.surname); // => undefined
        }
    }
    var myPerson = new Person("Datrevo");
    setTimeout(myPerson.getSurname, 1000);

La chiamata, dopo un secondo con setTimeout(), al metodo myPerson.getSurname è separata dall’oggetto quando viene passata come parametro e di conseguenza this punta all’oggetto globale (window, o undefined nella strict mode). Invocando il metodo con setTimeout(myPerson.getSurname(), 1000); il riferimento this punterà a Person.

Indice:

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

Lascia un commento

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

*