Impara Comprendere l'Ereditarietà con Extends e Super() | Padronanza delle Classi e dell'Ereditarietà in JavaScript

Che cos'è l'ereditarietà delle classi?

JavaScript utilizza la parola chiave extends per stabilire questa relazione tra classi. Una classe figlia può aggiungere le proprie proprietà e metodi oppure sovrascrivere quelli della classe genitore.

Considera una classe figlia come una versione specializzata della classe genitore. Se la classe genitore è un modello per un'auto, la classe figlia potrebbe rappresentare un tipo specifico di auto, come un'auto elettrica. L'auto elettrica eredita la funzionalità di base (ruote, sterzo) ma può aggiungere o modificare caratteristiche (batteria, sistema di ricarica).

Come utilizzare la parola chiave extends

La parola chiave extends viene utilizzata per far sì che una classe erediti da un'altra classe. La classe figlia eredita tutte le proprietà e i metodi della classe genitore.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

In questo esempio, la classe Dog estende la classe Animal, ereditando il metodo makeSound() dalla classe genitore. La classe Dog aggiunge inoltre il proprio metodo bark().

Gestione del costruttore in una classe figlia

Quando si crea una classe figlia, spesso è necessario inizializzare sia le proprie proprietà sia quelle della classe genitore. Questo avviene tramite il metodo constructor. Tuttavia, per garantire che la classe genitore venga inizializzata correttamente, è necessario utilizzare la funzione super() per chiamare il costruttore della classe genitore.

Importante: Quando una classe figlia possiede un costruttore, deve chiamare super() prima di accedere a this, altrimenti si verificherà un errore.

Utilizzo di super() per chiamare il costruttore della classe genitore

La funzione super() viene utilizzata per chiamare il costruttore della classe genitore all'interno del costruttore della classe figlia. Questo garantisce che tutte le proprietà o la logica definite nel costruttore della classe genitore vengano inizializzate correttamente prima di aggiungere nuove funzionalità nella classe figlia.


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

In questo esempio, abbiamo una classe base chiamata Animal con un costruttore che inizializza la proprietà name e un metodo makeSound che registra un messaggio generico di suono. La classe Dog estende Animal, aggiungendo il proprio costruttore che accetta sia name che breed come argomenti. All'interno del costruttore di Dog, la funzione super() viene utilizzata per chiamare il costruttore della classe genitore, assicurando che name venga impostato correttamente. Inoltre, Dog introduce un nuovo metodo, bark, che registra un messaggio specifico per la razza del cane. Quando creiamo una nuova istanza di Dog chiamata Rex della razza German Shepherd, possiamo chiamare sia makeSound che bark, mostrando il comportamento ereditato e quello nuovo.

Punti chiave nell'utilizzo di extends e super()

Ereditarietà: La parola chiave extends consente alla classe figlia di ereditare proprietà e metodi dalla classe genitore.

Costruttore nella classe figlia: Quando si definisce un costruttore nella classe figlia, utilizzare sempre super() per chiamare il costruttore della classe genitore.

Accesso a this: È necessario chiamare super() prima di accedere a this nel costruttore della classe figlia.

Override dei metodi: È possibile sovrascrivere i metodi della classe genitore nella classe figlia definendo un metodo con lo stesso nome. È inoltre possibile utilizzare super.methodName() per chiamare il metodo della classe genitore dall'interno della classe figlia, se necessario.

Esempio: Sovrascrittura dei metodi e utilizzo di super()

A volte può essere necessario sovrascrivere un metodo della classe genitore nella classe figlia, ma continuare a richiamare il metodo della classe genitore come parte della nuova logica. Questo è possibile utilizzando super.methodName().


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

In questo esempio, la classe Dog sovrascrive il metodo makeSound ma richiama comunque il metodo makeSound della classe genitore utilizzando super.makeSound(). Questo consente alla classe figlia di estendere il comportamento della classe genitore senza sostituirlo completamente.

Esempio reale: Classi Employee e Manager

Consideriamo uno scenario in cui abbiamo una classe Employee e una classe Manager che la estende. La classe Manager aggiunge nuove funzionalità rispetto a quelle di base fornite da Employee.


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

In questo esempio, la classe Manager estende la classe Employee, aggiungendo una nuova proprietà department. Il metodo getDetails() nella classe Manager richiama il metodo della classe genitore utilizzando super.getDetails() e aggiunge poi le informazioni specifiche del dipartimento.

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 14

Chieda ad AI

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 2.22

Scorri per mostrare il menu

Che cos'è l'ereditarietà delle classi?

Come utilizzare la parola chiave extends

La parola chiave extends viene utilizzata per far sì che una classe erediti da un'altra classe. La classe figlia eredita tutte le proprietà e i metodi della classe genitore.


              1234567891011121314151617181920
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!

In questo esempio, la classe Dog estende la classe Animal, ereditando il metodo makeSound() dalla classe genitore. La classe Dog aggiunge inoltre il proprio metodo bark().

Gestione del costruttore in una classe figlia

Importante: Quando una classe figlia possiede un costruttore, deve chiamare super() prima di accedere a this, altrimenti si verificherà un errore.

Utilizzo di super() per chiamare il costruttore della classe genitore


              1234567891011121314151617181920212223242526
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!

Punti chiave nell'utilizzo di extends e super()

Ereditarietà: La parola chiave extends consente alla classe figlia di ereditare proprietà e metodi dalla classe genitore.

Costruttore nella classe figlia: Quando si definisce un costruttore nella classe figlia, utilizzare sempre super() per chiamare il costruttore della classe genitore.

Accesso a this: È necessario chiamare super() prima di accedere a this nel costruttore della classe figlia.

Esempio: Sovrascrittura dei metodi e utilizzo di super()


              1234567891011121314151617181920212223242526272829
            
class Animal {
  constructor(name) {
    this.name = name;
  }

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.

Esempio reale: Classi Employee e Manager

Consideriamo uno scenario in cui abbiamo una classe Employee e una classe Manager che la estende. La classe Manager aggiunge nuove funzionalità rispetto a quelle di base fornite da Employee.


              12345678910111213141516171819202122232425262728
            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.

Tutto è chiaro?

Grazie per i tuoi commenti!

Sezione 1. Capitolo 14

Comprendere l'Ereditarietà con Extends e Super()

Che cos'è l'ereditarietà delle classi?

Come utilizzare la parola chiave extends

Gestione del costruttore in una classe figlia

Utilizzo di super() per chiamare il costruttore della classe genitore

Punti chiave nell'utilizzo di extends e super()

Esempio: Sovrascrittura dei metodi e utilizzo di super()

Esempio reale: Classi Employee e Manager

1. Cosa fa la parola chiave `extends`?

2. In una classe figlia, perché si usa `super()` nel costruttore?

3. Quale sarà l'output del seguente codice?

Awesome!

Comprendere l'Ereditarietà con Extends e Super()

Che cos'è l'ereditarietà delle classi?

Come utilizzare la parola chiave extends

Gestione del costruttore in una classe figlia

Utilizzo di super() per chiamare il costruttore della classe genitore

Punti chiave nell'utilizzo di extends e super()

Esempio: Sovrascrittura dei metodi e utilizzo di super()

Esempio reale: Classi Employee e Manager

1. Cosa fa la parola chiave `extends`?

2. In una classe figlia, perché si usa `super()` nel costruttore?

3. Quale sarà l'output del seguente codice?

Comprendere l'Ereditarietà con Extends e Super()

Che cos'è l'ereditarietà delle classi?

Come utilizzare la parola chiave extends

Gestione del costruttore in una classe figlia

Utilizzo di super() per chiamare il costruttore della classe genitore

Punti chiave nell'utilizzo di extends e super()

Esempio: Sovrascrittura dei metodi e utilizzo di super()

Esempio reale: Classi Employee e Manager

1. Cosa fa la parola chiave extends?

2. In una classe figlia, perché si usa super() nel costruttore?

3. Quale sarà l'output del seguente codice?

Awesome!

Comprendere l'Ereditarietà con Extends e Super()

Che cos'è l'ereditarietà delle classi?

Come utilizzare la parola chiave extends

Gestione del costruttore in una classe figlia

Utilizzo di super() per chiamare il costruttore della classe genitore

Punti chiave nell'utilizzo di extends e super()

Esempio: Sovrascrittura dei metodi e utilizzo di super()

Esempio reale: Classi Employee e Manager

1. Cosa fa la parola chiave extends?

2. In una classe figlia, perché si usa super() nel costruttore?

3. Quale sarà l'output del seguente codice?

1. Cosa fa la parola chiave `extends`?

2. In una classe figlia, perché si usa `super()` nel costruttore?

1. Cosa fa la parola chiave `extends`?

2. In una classe figlia, perché si usa `super()` nel costruttore?