LE CLASSI NEL LINGUAGGIO JAVASCRIPT

DEFINIRE UNA CLASSE E IL SUO COSTRUTTORE

Una constructor function normalmente riceve in input dei parametri. La keyword this fa in modo che gli oggetti creati dalla constructor function abbiano una copia di quelle proprietà, proprietà aventi come valori i valori passati in input. Vediamo con un esempio di codice le differenze tra una constructor function e una classe.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Introduzione</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*Una constructor function normalmente
        riceve in input dei parametri e utilizziamo
        this per fare in modo che gli oggetti creati
        dalla constructor function abbiano una copia
        di quelle proprietà con i valori passati in
        input. */
        function User(nome, anni){
            this.nome = nome;
            this.anni = anni;
            /*Abbiamo creato 2 proprietà con la sintassi
            this.nomeproprietà*/
        }
        const marco = new User('Marco', 53);
        console.log(marco);//Object con 2 proprietà
        /*Utilizziamo una classe*/
        class UserClass{
            /*Per inizializzare le proprietà come abbiamo fatto con la
            constructor function dobbiamo usare un metodo speciale chiamato
            constructor.*/
            constructor(nome, anni){
                this.nome = nome;
                this.anni = anni;
            }
        }
        const michele = new UserClass("Michele", 29);
        /*L'oggetto michele si dice che è una istanza di
        UserClass*/
        console.log(michele);//Il risultato è lo stesso della constructor function
        //creato oggetto con 2 proprietà nome e anni. Il prototipo dell'oggetto michele
        //si trova in UserClass.prototype
        console.log(Object.getPrototypeOf(michele)==UserClass.prototype);

</script>
</body>
</html>

Creare un oggetto da una constructor function o creare una istanza da una classe con le medesime proprietà da i medesimi risultati. La differenza è che le proprietà di una classe devono essere inizializzate in un metodo speciale chiamato constructor.

I METODI

All’interno di una classe non possiamo definire variabili con let, var o const come si fa per le constructor function. I metodi definiti in una classe vengono inseriti nell’oggetto prototype della classe.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Metodi</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        class UserClass{
            /*Per inizializzare le proprietà come abbiamo fatto con la
            constructor function dobbiamo usare un metodo speciale chiamato
            constructor. All'interno di una classe non possiamo definire
            variabili con let, var o const come si fa per le constructor function.*/
            constructor(nome, anni){
                this.nome = nome;
                this.anni = anni;
            }
            info(){
                return `Nome ${this.nome} età ${this.anni}`;
            }
        }
        let mirco = new UserClass('Mirco', 26);
        console.log(mirco.info());
        /*--I metodi definiti in una classe
        vengono inseriti nell'oggetto prototype della classe.*/
        console.log(UserClass);
        //Tutto il codice della classe è equivalente a.
        function UserClass2(nome, anni){
            this.nome = nome;
            this.anni = anni;
        }
        UserClass2.prototype.info = function(){
            return `Nome ${this.nome} età ${this.anni}`;
        }
        console.log(UserClass2);
    </script>
</body>
</html>

PROPRIETA’ PUBBLICHE E PRIVATE

avatar definita nel codice sotto riportato è una proprietà pubblica accessibile attraverso gli oggetti. Da ES2019 possiamo definire proprietà private accessibili solo internamente alla classe.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Proprietà pubbliche e private</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        /*--Da ES2019 è possibile definire una proprietà
        al fuori del costruttore.*/

class UserClass{
            
            avatar = "Nessun avatar";
            #privata = 'Proprietà privata';
            /*--avatar è una proprietà pubblica accessibile
            attraverso gli oggetti. Da ES2019 possiamo definire
            proprietà private accessibili solo internamente alla classe.*/

constructor(nome){
                this.nome = nome;
            }
            info(){
                return `Nome ${this.nome}`;
            }
            getPrivata(){
                return this.#privata;
            }
        }
        const monica = new UserClass("Monica");
        /*Proviamo ad accedere all proprietà avatar*/
        console.log(monica.avatar);
        console.log(monica.privata);//undefined
        console.log(monica.getPrivata());
    </script>
</body>
</html>

METODI GETTER E SETTER

Un metodo getter restituisce un valore, un metodo setter imposta il valore di una proprietà. Gli oggetti della classe si interfacciano ai metodi getter e setter come se fossero proprietà.

Copy to Clipboard

METODI STATICI E PROPRIETA’ STATICHE

In alcuni casi potremmo voler accedere a un metodo di una classe senza istanziarla. Possiamo farlo con i metodi statici. Un metodo statico non può accedere a metodi non statici mentre vale il viceversa.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Metodi e proprietà statiche</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        class User{
            static count = 0;//Proprietà statica
            constructor(nome, anni, altezza){
                this.nome = nome;
                this.anni = anni;
                this.altezza = altezza;
                this.titoloDiStudio = '';
            }
            //GETTER
            get pesoIdeale(){
                return (this.altezza - 100) * 0.9;
            }
            //SETTER
            set titolo(value){
                this.titoloDiStudio = value;
            }
            //METODO STATICO
            static confronta(persona1, persona2){
                let str = '';
                const diff = Math.abs(persona1.anni - persona2.anni);
                if(persona1.anni > persona2.anni){
                    str += `${persona1.nome} ha ${diff} anni in più di
                    ${persona2.nome}`
                }else{
                    str += `${persona1.nome} ha ${diff} anni in meno di
                    ${persona2.nome}`
                }
                console.log(str);
            }
            fn(){
                User.fn2();
            }
            static fn2(){
                console.log("Accesso al metodo statico da un metodo non statico.");
            }
        }
        const maria = new User("Maria",23,170);
        const lucia = new User("Lucia",25,165);
        User.confronta(maria,lucia);
        lucia.fn();
        User.count++;
        console.log(User.count);

</script>
</body>
</html>

ESTENDERE UNA CLASSE

Utilizzando la keyword extends possiamo ereditare proprietà e metodi da una classe chiamata superclasse in un’altra chiamata solitamente sottoclasse o classe derivata.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Estendere una classe</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        class Prodotti{
            constructor(marca, modello, prezzo){
                this.marca = marca;
                this.modello = modello;
                this.prezzo = prezzo;
            }
           
            descrivimi(){
                return `marca ${this.marca}, modello ${this.modello}\n prezzo ${this.prezzo}`;
            }
        }
        class Elettrodomestici extends Prodotti{
            constructor(marca, modello, prezzo,categoria){
                super(marca, modello, prezzo);
                //Quando la sottoclasse ha un proprio costruttore
                //dobbiamo invocare il costruttore parent con la
                //parola chiave super. La classe estesa si chiama
                //superclasse la classe che la estende sottoclasse.
                this.categoria = categoria;
            }
            descrivimi(){
                return `Categoria ${this.categoria} ${super.descrivimi()}`;
            }
        }
        const ele = new Elettrodomestici('LG','65 pollici',820,'TV');
        console.log(ele.descrivimi());//Viene invocato il metodo della sottoclasse
        /*--Abbiamo un oggetto con 4 proprietà, 3 sono state inizializzate
        dal costruttore parent (Prodotti) l'ultima, categoria dalla classe 
        Elettrodomestici*/
    </script>
</body>
</html>

RELAZIONI TRA SUPERCLASSI E SOTTOCLASSI

Utlizzando instanceof possiamo capira la gerarchia tra superclassi e sottoclasssi e i loro prototype.

Copy to Clipboard

Relazioni tra sotto classi e superclassi

LINK AI POST PRECEDENTI

IL LINGUAGGIO JAVASCRIPT

LINK AL CODICE SU GITHUB

GITHUB

LE CLASSI NEL LINGUAGGIO JAVASCRIPT