La classi in JavaScript

Le classi in JavaScript non sono altro che delle istanze degli oggetti definiti e consentono di ereditare proprietà e metodi da altri oggetti

In JavaScript tutto è un oggetto, non esiste il classico concetto di classe come in altri linguaggi di programmazione orientati agli oggetti. Quando si definisce un oggetto si sta creando direttamente un’istanza dell’oggetto stesso e la si inizia ad usare, non si sta definendo nessuna classe. Ad esempio.

    var myObject = {
        field1: 1;
    }

A partire da ECMAScript 2015 (ES6) è stata introdotta la keyword class, questa nuova chiave non introduce nessun nuova classe in JavaScript, rappresenta semplicemente un modo più semplice e pulito per creare oggetti e favorire l’ereditarietà tra oggetti (si parla di oggetti, non di classi).

Le classi in JavaScript possono essere viste come delle speciali funzioni e così come per creare una funzione si possono usare le function expressions (var myFunction = function () {}) e le function declarations (function myFunction () {}), anche per le classi esistono le:

  • Class declarations (dichiarazione di classi);
  • Class expressions (espressioni di classe).

Per dichiarare una classe tramite le class declarations si utilizza la chiave class seguita dal nome della classe. Ad esempio:

    class MyClass {
        constructor(field1) {
            this.field1 = field1;
        }
    }

Attenzione però che per le class declarations non si applica l’hoisting (L’hoisting delle classi in JavaScript) come per le function declaration, di conseguenza non possono essere utilizzate prima di essere dichiarate:

    var myClass = new MyClass(1); // ReferenceError: MyClass is not defined
    class MyClass {
        constructor(field1) {
            this.field1 = field1;
        }
    }

Una classe può essere dichiarate tramite le class expressions sia con un nome che senza nome. Ad esempio scrivendo:

    var MyClass = class {
        constructor(field1) {
            this.field1 = field1;
        }
    }

In questo caso è stata creata una classe senza nome. Al contrario, facendo seguire a class un nome creeremo una classe con un nome:

    var MyClass = class MyClass {
        constructor(field1) {
            this.field1 = field1;
        }
    }

Anche per le classi definite tramite espressioni l’hoisting non viene applicato.

Il costruttuore e i metodi delle classi JavaScript

Nei precedenti esempi è stato introdotto constructor(), si tratta del metodo costruttore degli oggetti in JavaScript che viene eseguito per creare e inizializzare un oggetto. Può essere presente un unico metodo constructor in ogni oggetto e da esso si può fare riferimento al metodo costruttore della classe padre. Per approfondire: L’ereditarietà dei costruttori in JavaScript con constructor e prototype.

    var MyClass = class MyClass {
        constructor(field1) {
            super(field1);
        }
    }

A partire da ES6 è stata introdotta la possibilità di estendere esplicitamente gli oggetti in modo da ereditare proprietà e metodi. Ad esempio, definiamo una super classe con un metodo costruttore ed un metodo che ritorna una stringa:

    class SuperClass {
        constructor(field1) {
            this.field1 = field1;
        }
        method1() {
            return this.field1;
        }
        method2() {
            return "Datrevo";
        }
    }

Definendo in questo modo la sottoclasse:

    class SubClass extends SuperClass {
        constructor(field1) {
            super(field1);
        }
    }

Di conseguenza la sottoclasse eredita dalla superclasse proprietà e metodi, è quindi corretto poter scrivere:

    var mySubClass = new SubClass("Hi");
    console.log(mySubClass.field1); // => Hi
    console.log(mySubClass.method1()); // => Hi
    console.log(mySubClass.method2()); // => Datrevo

È stata prevista anche la possibilità di creare proprietà setter e getter per gli oggetti. Ad esempio:

    class MyClass {
        constructor(field1) {
            this.field1 = field1;
        }
        get getField1() {
            return this.field1;
        }
        set setField1(field1) {
            this.field1 = field1;
        }
    }

    var myClass = new MyClass("1");
    console.log(myClass.field1); // => 1
    myClass.setField1 = 2;
    console.log(myClass.getField1); // => 2

Infine possono essere definiti dei metodi statici che possono essere chiamati quando non si ha un’istanza dell’oggetto:

    class MyClass {
        static method1() {
            return "Datrevo";
        }
    }

    console.log(MyClass.method1()); // => Datrevo

I metodi statici non possono essere più utilizzati quando l’oggetto è stato istanziato:

    class MyClass {
        static method1() {
            return "Datrevo";
        }
    }

    var myClass = new MyClass();

    console.log(myClass.method1()); // => TypeError: myClass.method1 is not a function

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

Lascia un commento

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

*