Classi JavaScript
ECMAScript 2015, noto anche come ES6, ha introdotto le classi JavaScript.
Le classi JavaScript sono modelli per oggetti JavaScript.
Sintassi della classe JavaScript
Usa la parola chiave class
per creare una classe.
Aggiungi sempre un metodo chiamato constructor()
:
Sintassi
class ClassName {
constructor() { ... }
}
Esempio
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
L'esempio sopra crea una classe denominata "Car".
La classe ha due proprietà iniziali: "name" e "year".
Una classe JavaScript non è un oggetto.
È un modello per oggetti JavaScript.
Usando una classe
Quando hai una classe, puoi usare la classe per creare oggetti:
Esempio
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
L'esempio precedente usa la classe Car per creare due oggetti Car .
Il metodo del costruttore viene chiamato automaticamente quando viene creato un nuovo oggetto.
Il metodo del costruttore
Il metodo del costruttore è un metodo speciale:
- Deve avere il nome esatto "costruttore"
- Viene eseguito automaticamente quando viene creato un nuovo oggetto
- Viene utilizzato per inizializzare le proprietà dell'oggetto
Se non si definisce un metodo di costruzione, JavaScript aggiungerà un metodo di costruzione vuoto.
Metodi di classe
I metodi di classe vengono creati con la stessa sintassi dei metodi oggetto.
Usa la parola chiave class
per creare una classe.
Aggiungi sempre un constructor()
metodo.
Quindi aggiungi un numero qualsiasi di metodi.
Sintassi
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Crea un metodo Class chiamato "age", che restituisce l'età dell'auto:
Esempio
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 =
"My car is " + myCar.age() + " years old.";
Puoi inviare parametri ai metodi Class:
Esempio
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=
"My car is
" + myCar.age(year) + " years old.";
Supporto browser
La tabella seguente definisce la prima versione del browser con supporto completo per Classi in JavaScript:
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
Imparerai molto di più sulle classi JavaScript più avanti in questo tutorial.