CodeGym /Corsi /Frontend SELF IT /Sintassi delle classi

Sintassi delle classi

Frontend SELF IT
Livello 39 , Lezione 4
Disponibile

5.1 Dichiarazione di una classe

Con l'introduzione di ECMAScript 6 (ES6) in JavaScript è nata una nuova struttura per la creazione di oggetti e la gestione dell'ereditarietà - la parola chiave class. Le classi forniscono una sintassi più conveniente e comprensibile per la creazione di oggetti e il lavoro con i prototipi.

Le classi in JavaScript sono zucchero sintattico sulla già esistente sistema di ereditarietà prototipale. Rendono la creazione e la gestione degli oggetti più comprensibile e strutturata.

Dichiarazione di una classe

Una classe in JavaScript è dichiarata usando la parola chiave class, seguita dal nome della classe. Il corpo della classe è racchiuso tra parentesi graffe {}.

Esempio:

JavaScript
    
      class Person {
        // Metodo della classe
        greet() {
          console.log('Hello!');
        }
      }

      // Creazione di un'istanza della classe
      const person = new Person();
      person.greet(); // Mostrerà: Hello!
    
  

Espressione di una classe

Le classi possono essere dichiarate sia tramite una dichiarazione, sia tramite un'espressione. Le espressioni di classe possono essere nominate o anonime.

Esempio di classe nominata:

JavaScript
    
      const Person = class PersonClass {
        greet() {
          console.log('Hello!');
        }
      };

      const person = new Person();
      person.greet(); // Mostrerà: Hello!
    
  

Esempio di classe anonima:

JavaScript
    
      const Person = class {
        greet() {
          console.log('Hello!');
        }
      };

      const person = new Person();
      person.greet(); // Mostrerà: Hello!
    
  

5.2 Campi e metodi delle classi

Proprietà delle classi

Le proprietà delle classi in ES6 possono essere dichiarate solo all'interno del costruttore. Tuttavia, nelle versioni più recenti di JavaScript (ES2022) sono stati introdotti i campi delle classi, che consentono di dichiarare proprietà al di fuori del costruttore.

Esempio di utilizzo delle proprietà nel costruttore:

JavaScript
    
      class User {
        constructor(username, email) {
          this.username = username;
          this.email = email;
        }
      }

      const user = new User('john_doe', 'john@example.com');

      console.log(user.username); // "john_doe"
      console.log(user.email); // "john@example.com"
    
  

Esempio di utilizzo dei campi delle classi (ES2022):

JavaScript
    
      class User {
        username = 'default_username';
        email = 'default@example.com';

        constructor(username, email) {
          this.username = username;
          this.email = email;
        }
      }

      const user = new User('john_doe', 'john@example.com');

      console.log(user.username); // "john_doe"
      console.log(user.email); // "john@example.com"
    
  

Spiegazione:

  • Nel primo esempio, le proprietà username e email sono dichiarate e inizializzate all'interno del costruttore
  • Nel secondo esempio, le proprietà username e email sono dichiarate al di fuori del costruttore come campi della classe

Metodi della classe

Una classe può contenere metodi, i quali sono definiti all'interno del corpo della classe. Questi metodi vengono automaticamente aggiunti al prototipo degli oggetti creati.

Esempio di metodi della classe:

JavaScript
    
      class Animal {
        speak() {
          console.log('L\'animale parla');
        }

        eat() {
          console.log('L\'animale mangia');
        }
      }

      const animal = new Animal();
      animal.speak(); // Mostrerà: L'animale parla
      animal.eat();   // Mostrerà: L'animale mangia
    
  

3.3 Esempi di utilizzo delle classi

Creazione di oggetti complessi

Le classi permettono di creare oggetti complessi con vari metodi e proprietà.

Esempio:

JavaScript
    
      class Car {
        constructor(brand, model) {
          this.brand = brand;
          this.model = model;
        }

        startEngine() {
          console.log(`${this.brand} ${this.model} motore avviato.`);
        }

        stopEngine() {
          console.log(`${this.brand} ${this.model} motore spento.`);
        }
      }

      const myCar = new Car('Toyota', 'Camry');
      myCar.startEngine(); // Mostrerà: Toyota Camry motore avviato.
      myCar.stopEngine();  // Mostrerà: Toyota Camry motore spento.
    
  
Commenti
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION