JavaScript (JS) è un linguaggio meravigliosamente eccentrico. Ispirato da Smalltalk, utilizza una sintassi simile a C che combina aspetti della programmazione procedurale, funzionale e orientata agli oggetti (OOP), tutti messi insieme in un modo deliziosamente non opinabile. JavaScript è orientato agli oggetti nel senso che Tutto quanto in JS è un oggetto. Tuttavia, gli oggetti JS non sono gli stessi che troverai in Java o C#. Una delle principali differenze è che JS utilizza l’ereditarietà prototipo, che è un mondo lontano dai meccanismi di ereditarietà dei linguaggi OO tradizionali.

Molte persone hanno scritto librerie che aggiungono zucchero sintattico al linguaggio JS per mascherare l’aspetto prototipo dei suoi oggetti, ma è stato solo nel 2015 che JavaScript ha introdotto la parola chiave class con il rilascio di ES6. Da allora, gli sviluppatori si sono rallegrati del fatto che JavaScript sia finalmente un vero linguaggio orientato agli oggetti! Non così in fretta. Sotto le coperte, la lingua funziona ancora esattamente allo stesso modo. Tuttavia, l’introduzione delle classi fornisce agli sviluppatori una nuova opzione per creare oggetti utilizzando una sintassi con cui hanno familiarità. Questo blog dimostrerà come definire e lavorare con le nuove classi ES6.

La nostra prima classe ES6

Ecco la definizione per una classe Veicolo:

class Vehicle {

  constructor(vin) {
    this._vin = vin;
  }

}

Il costruttore() viene utilizzato per creare e inizializzare la nostra classe. Tecnicamente, non è richiesto; omettendolo userà il costruttore predefinito sans parametri. Detto questo, sono un modo ideale per inizializzare le variabili dei membri della classe, come il numero vin. Se includi un costruttore, devi passargli tutti i parametri di inizializzazione. Non provare a sovrascriverlo per varie combinazioni di parametri, poiché avere più di un costruttore genererà a Errore di sintassi. Non c’è motivo di farlo comunque, poiché JS non impone il numero o i tipi di parametri passati.

Per creare un’istanza, chiama la classe con nuovo parola chiave, passando i parametri di inizializzazione che desideri impostare durante la creazione dell’oggetto:

const vehicle = new Vehicle('1HGBH41JXMN109186');
console.log(vehicle); //Vehicle { _vin: '1HGBH41JXMN109186' }

Getter e Setter

Conosciuto anche come Accessorio e mutatore metodi, Getters e Setter nascondere la rappresentazione interna delle proprietà della classe esponendole ad attori esterni utilizzando una rappresentazione alternativa. Dai un’occhiata a questa versione ampliata della classe Vehicle che include getter e setter, oltre a un paio di metodi, solo per una buona misura:

class Vehicle {
  _speed = 0;

  constructor(vin, maxSpeed, accelFactor) {
    this._vin = vin;
    this._maxSpeed = maxSpeed || 160;
    this._accelFactor = accelFactor || 10;
  }

  get vin() {
    return this._vin.toUpperCase();
  }

  get maxSpeed() {
    return this._maxSpeed;
  }

  set maxSpeed(maxSpeed) {
    this._maxSpeed = maxSpeed;
  }

  get accelFactor() {
    return this._accelFactor;
  }

  set accelFactor(accelFactor) {
    this._accelFactor = accelFactor;
  }

  get speed() {
    return this._speed;
  }

  accelerate() {
    if (this._speed <= this._maxSpeed - this._accelFactor) {
      this._speed += this._accelFactor;
    }
  }

  decelerate() {
    if (this._speed >= this._accelFactor) {
      this._speed -= this._accelFactor;
    }
  }
}

const vehicle = new Vehicle('1HGBH41JXMN109186', 150, 20);
console.log(vehicle.vin); //1HGBH41JXMN109186
console.log(vehicle.maxSpeed); //150
console.log(vehicle.accelFactor); //20
console.log(vehicle.speed); //0
vehicle.accelerate();
vehicle.accelerate();
console.log(vehicle.speed); //40
vehicle.decelerate();
console.log(vehicle.speed); //20

Sebbene la nostra classe Vehicle accetti fino a tre parametri del costruttore, è dichiarata solo una variabile membro (la velocità). Questo perché i parametri del costruttore possono essere assegnati direttamente al puntatore this. In caso contrario, dovrai dichiararlo prima di potervi accedere.

Metodi statici

Un metodo statico è uno che può essere invocato sulla classe stessa, piuttosto che su un’istanza di classe. Per dimostrarlo, ecco un metodo che controlla se il veicolo sta viaggiando oltre il limite di velocità. Poiché il metodo accetta tutto ciò di cui ha bisogno per effettuare una determinazione, vale a dire la velocità e il limite, può essere implementato come statico. Questo ci permette di invocarlo direttamente sulla classe Vehicle come segue:

static isOverSpeedLimit(speed, limit) {
  return speed >= limit;
}

// ... 
console.log(Vehicle.isOverSpeedLimit(120, 100)); //true

Sottoclassi con estensioni

Una delle caratteristiche più importanti delle classi è la loro capacità di estenderne un’altra per alterare o migliorare la funzionalità del genitore. Così, il si estende La parola chiave viene utilizzata nelle dichiarazioni di classe per creare una classe come figlia di un’altra classe. La classe Auto di seguito estende Veicolo e include il _numeroDiPorte attributo perché veicoli come dune buggy, golf cart e trattori non hanno necessariamente le porte!

class Car extends Vehicle {
  constructor(vin, maxSpeed, accelFactor, numberOfDoors) {
    super(vin, maxSpeed, accelFactor);
    this._numberOfDoors = numberOfDoors;
  }

  get numberOfDoors() {
    return this._numberOfDoors;
  }
}

const myCar = new Car('1HGBH41JXMN109186', 150, 20, 2);
console.log(myCar.vin);
console.log(myCar.maxSpeed);
console.log(myCar.accelFactor);
console.log(myCar.accelFactor);
console.log(myCar.numberOfDoors);
myCar.accelerate();
myCar.accelerate();
console.log(myCar.speed);
myCar.decelerate();
console.log(myCar.speed);

Il costruttore della Vettura accetta quattro parametri, in modo che possa passare i primi tre valori al costruttore del Veicolo tramite la chiamata a super().

Supporto browser

Dalla versione 2015 di ES6, ci sono stati alcuni aggiornamenti, ma la maggior parte delle nuove funzionalità, tra cui lasciare/constare, i valori dei parametri predefiniti e alcuni nuovi metodi Array facevano parte della prima versione di ES6. È supportato dai seguenti browser:

• Cromo 51
• Firefox 52
• Bordo 14
• Safari 10
• Opera 38
• MS Edge 14

L’unico browser popolare che non supporta ES6 è Internet Explorer. Microsoft non lo supporta più, quindi non passerà molto tempo prima che non ci siano praticamente utenti di questa reliquia obsoleta.

Troverai una demo con il codice di oggi attivo Codepen.io.

Conclusione

Alcuni hanno sostenuto che è meglio concentrare i propri sforzi sull’imparare tutto sull’ereditarietà prototipale piuttosto che introdurre più zucchero sintattico nel codice. Io, d’altra parte, prendo una posizione più liberale e sento che le tue particolari esigenze di sviluppo dovrebbero dettare se approfittare o meno delle nuove offerte di classe ES6. Come sviluppatore Java di lunga data, per me è stata sicuramente una gradita aggiunta al linguaggio!