CLASSES IN THE JAVASCRIPT LANGUAGE

DEFINE A CLASS AND ITS CONSTRUCTOR

A constructor function normally receives parameters as input. The keyword this makes sure that the objects created by the constructor function have a copy of those properties, properties having as values the values passed in as input. Let us see with a code example the differences between a constructor function and a class.

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>

Creating an object from a constructor function or creating an instance from a class with the same properties gives the same results.
The difference is that the properties of a class must be initialized in a special method called constructor.

METHODS

Within a class, we cannot define variables with let, var or const as we do with constructor functions. Methods defined in a class are placed in the prototype object of the class.

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>

PUBLIC AND PRIVATE PROPERTIES

avatars defined in the code below is a public property accessible through the objects. From ES2019 we can define properties private accessible only internally to the class.

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>

GETTER AND SETTER METHODS

A getter method returns a value, a setter method sets the value of a property. Class objects interface with getter and setter methods as if they were properties.

Copy to Clipboard

STATIC METHODS AND STATIC PROPERTIES

In some cases we may want to access a method of a class without instantiating it. We can do this with static methods. A static method cannot access non-static methods while the vice versa applies.

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>

EXTEND A CLASS

Using the keyword extends we can inherit properties and methods from a class called superclass into another usually called subclass or derived class.

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>

RELATIONSHIPS BETWEEN SUPERCLASSES AND SUBCLASSES

Using instanceof we can understand the hierarchy between superclasses and subclasses and their prototypes.

Copy to Clipboard

Relazioni tra sotto classi e superclassi

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB

CLASSES IN THE JAVASCRIPT LANGUAGE