La constructor invocation in JavaScript

Utilizzare una funzione tramite l’invocazione di un costruttore consente di far puntare il riferimento this all’oggetto appena creato

In JavaScript si parla di Constructor Invocation quando viene utilizzata la parola chiave new seguita da un’espressione che valuta una funzione di un oggetto e seguita dalle parentesi tonde seguita, eventualmente, da una lista di argomenti. Ad esempio: new Person().

    function Person(surname) {
        this.surame = surname;
    }
    var myPerson = new Person("Datrevo");
    var myPerson2 = new Person;

A partire da ECMAScript 2015, JavaScript consente di definire i costruttori utilizzando class:

    class Person {
        constructor(name) {
            this.name = name;
        }
        getName() {
            return this.name;
        }
    }
    var myPerson = new Person("Datrevo");
    myPerson.getName();

L’inizializzazione dell’oggetto è gestita dal metodo speciale constructor della classe. Il ruolo di un costruttore è quello di inizializzare le proprietà di un oggetto.

Nelle constructor invocation il valore di this punta al nuovo oggetto creato.

Avremo quindi che:

    function myConstructor() {
        console.log(this instanceof myConstructor); // => true
    };
    var myObject = new myConstructor();

In alcuni casi JavaScript crea delle istanze non solo quando si invoca un costruttore ma anche quando si invocano le funzioni. Ad esempio per le RegExp avremo:

    var reg1 = new RegExp('\\w+');
    var reg2 = RegExp('\\w+');

    reg1 instanceof RegExp; // => true
    reg2 instanceof RegExp; // => true
    reg1.source === reg2.source; // => true

In questo caso scrivendo new RegExp(‘\\w+’) e RegExp(‘\\w+’) vengono creati degli oggetti equivalenti.

Utilizzare le invocazioni di funzione per creare oggetti è un potenziale problema in quando potrebbe non inizializzare gli oggetti correttamente. Ad esempio:

    function Car(type) {
        this.type = type;
        return this;
    }

    var myCar = Car("Fiat");
    console.log(myCar.type); // => Fiat
    console.log(myCar === window); // => true

Nell’esempio viene creato un oggetto di tipo Car ma il this ritornato punta a window in quando si tratta di una function invocation, ciò comporta che il type di Car è aggiunto all’oggetto window e non all’oggetto Car che non verrà affatto creato.

Mentre creando l’oggetto con la constructor invocation avremo false alla condizione myCar === window.

Oltre ad utilizzare il new per la creazione di un nuovo oggetto, si può prevenire una function invocation effettuando un controllo sulla classe con l’operatore instanceof:

    function Car(type) {
    if (!(this instanceof Car)) {
        throw Error('Error: Incorrect constructor invocation');
        this.type = type;
        return this;
    }
    var myCar = Car("Fiat");
    console.log(myCar.type); // => Fiat
    car instanceof Car // => true

    // Function invocation. Generates an error.
    var brokenCar = Vehicle('Broken Car', 3);

Indice:

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

Lascia un commento

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

*