Classi JavaScript

ECMAScript 2015, noto anche come ES6, ha introdotto le classi JavaScript.

Le classi JavaScript sono modelli di oggetti JavaScript.

Classi JavaScript

sintassi

Usa la parola chiave class Crea la classe.

Aggiungi sempre il nome constructor() metodi:

sintassi

class ClassName {
  constructor() { ... }
}

istanza

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

L'esempio sopra crea una classe chiamata "Car".

La classe ha due proprietà iniziali: "name" e "year".

Classi JavaScriptNon èoggetto.

È solo un oggetto JavaScript.Modello.

Usa la classe

Se hai una classe, puoi usarla per creare oggetti:

istanza

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

Prova te stesso

L'esempio sopra utilizza Classe Carhanno creato due Oggetto Car.

Il metodo constructor viene chiamato automaticamente quando si crea un nuovo oggetto.

Metodo costruttore

Il metodo costruttore è un metodo speciale:

  • Deve avere il nome esatto di "costruttore"
  • Eseguito automaticamente al creazione di un nuovo oggetto
  • Usato per inizializzare le proprietà dell'oggetto
  • Se non viene definito il metodo costruttore, JavaScript aggiunge un metodo costruttore vuoto.

Metodi di classe

Creazione dei metodi di classe

sintassi

come i metodi degli oggetti.

Usa la parola chiave class Crea la classe.

Aggiungi sempre constructor() metodi.

Aggiungi quindi un numero illimitato di metodi.

sintassi

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Crea un metodo della classe chiamato "age" che restituisce l'età dell'auto:

istanza

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "La mia auto ha " + myCar.age() + " anni.";

Prova te stesso

Puoi inviare parametri ai metodi della classe:

istanza

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}
let date = new Date();
let year = date.getFullYear();
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML = "La mia macchina ha " + myCar.age(year) + " anni.";

Prova te stesso

Supporto del browser

La tabella seguente elenca le prime versioni dei browser che supportano completamente le classi JavaScript:

Chrome IE Firefox Safari Opera
Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Marzo 2016 Luglio 2015 Marzo 2016 Ottobre 2015 Marzo 2016

Nei tutorial seguenti, imparerai di più sulle classi di JavaScript.