Classi JavaScript

ECMAScript 2015, noto anche come ES6, ha introdotto la classe JavaScript.

La classe JavaScript è uno schema per gli oggetti JavaScript.

Sintassi della classe JavaScript

Usa la parola chiave class Crea una classe.

Aggiungi sempre un nome constructor() Metodo:

Sintassi

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

Esempio

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

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

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

Classi JavaScriptNon èOggetto.

È un oggetto JavaScriptModello.

Usare la classe

Quando hai una classe, puoi usarla per creare oggetti:

Esempio

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

Prova da solo

L'esempio sopra utilizza Classe Carper creare due Oggetto Car.

Il metodo costruttore (constructor method) viene chiamato automaticamente quando si crea un nuovo oggetto.

Metodo costruttore

Il metodo costruttore è un metodo speciale:

  • Deve avere il nome esatto di "constructor"
  • Eseguito automaticamente quando si crea un nuovo oggetto
  • Usato per inizializzare le proprietà dell'oggetto
  • Se non definisci il metodo costruttore, JavaScript aggiungerà un metodo costruttore vuoto.

Metodi della classe

La sintassi per creare un metodo della classe è la stessa di quella per i metodi degli oggetti.

Crea una classe utilizzando la parola chiave class.

Aggiungi sempre il metodo constructor().

Aggiungi quindi un numero qualsiasi di metodi.

Sintassi

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

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

Esempio

class Car {
  costruttore(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 da solo

Puoi inviare parametri ai metodi della classe:

Esempio

class Car {
  costruttore(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 auto ha " + myCar.age(year) + " anni.";

Prova da solo

Supporto del browser

La tabella sottostante indica la versione del browser che supporta completamente il tipo 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

"use strict"

La sintassi delle classi deve essere scritta in 'Modalità stretta'.

Se non segui le regole della 'Modalità stretta', riceverai un messaggio di errore.

Esempio

In 'Modalità stretta', se utilizzi una variabile senza dichiararla, riceverai un errore:

class Car {
  costruttore(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // Questo non funzionerà
    let date = new Date(); // Questo funzionerà
    return date.getFullYear() - this.year;
  }
}

Prova da solo

In Modalità stretta JS Impara di più su 'Modalità stretta' qui.