Reagire alle classi ES6


Classi

ES6 ha introdotto le classi.

Una classe è un tipo di funzione, ma invece di utilizzare la parola chiave functionper avviarla, utilizziamo la parola chiave classe le proprietà vengono assegnate all'interno di un constructor()metodo.

Esempio

Un semplice costruttore di classi:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

Si noti il ​​caso del nome della classe. Abbiamo iniziato il nome, "Car", con un carattere maiuscolo. Questa è una convenzione di denominazione standard per le classi.

Ora puoi creare oggetti usando la classe Car:

Esempio

Crea un oggetto chiamato "mycar" basato sulla classe Car:

class Car {
  constructor(name) {
    this.brand = name;
  }
}

const mycar = new Car("Ford");

Nota: la funzione di costruzione viene chiamata automaticamente quando l'oggetto viene inizializzato.


w3schools CERTIFIED . 2022

Ottieni la certificazione!

Completa i moduli React, fai gli esercizi, fai l'esame e diventa certificato w3schools!!

ISCRIVITI A $95

Metodo nelle classi

Puoi aggiungere i tuoi metodi in una classe:

Esempio

Crea un metodo chiamato "present":

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}

const mycar = new Car("Ford");
mycar.present();

Come puoi vedere nell'esempio sopra, chiami il metodo facendo riferimento al nome del metodo dell'oggetto seguito da parentesi (i parametri andrebbero all'interno delle parentesi).


Eredità di classe

Per creare un'eredità di classe, utilizzare la extends parola chiave.

Una classe creata con un'eredità di classe eredita tutti i metodi da un'altra classe:

Esempio

Crea una classe denominata "Model" che erediterà i metodi dalla classe "Car":

class Car {
  constructor(name) {
    this.brand = name;
  }

  present() {
    return 'I have a ' + this.brand;
  }
}

class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}
const mycar = new Model("Ford", "Mustang");
mycar.show();

Il super()metodo fa riferimento alla classe padre.

Chiamando il super()metodo nel metodo del costruttore, chiamiamo il metodo del costruttore del genitore e otteniamo l'accesso alle proprietà e ai metodi del genitore.

Per saperne di più sulle classi, controlla la nostra sezione Classi JavaScript .