Classes

Le classi JavaScript introdotte in ECMAScript 6 sono sintatticamente una manna dal cielo in confronto con la versione esistente prototype-based. La sintassi  non introduce un nuovo modello di eredita' object-oriented a Javascript. Le classi JavaScript forniscono una sintassi molto piu' semplice e pulita per create oggetti e aver a che fare con l'ereditarieta'.

Definizione classi

Le classi, di fatto, funzioni, e cosi' come puoi definire una function expressions e function declarations, la sintassi per la classe ha due componenti: class expressions and class declarations.

Class declarations

Un modo per definire una classe e' quello di dichiararla. Per dichiarare una classe, usa la keyword class seguito dal nome della classe (in questo caso "Polygon").

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Hoisting

Un'importante differenza tra la dichiarazione di una funzione e la dichiarazione di una classe e' che le dichiarazioni di funzione sono hoisted mentre quelle per le classi no. Bisogna dichiarare la classe e poi si puo' usarla, altrimenti il codice solleva un'eccezione ReferenceError:

var p = new Polygon(); // ReferenceError

class Polygon {}

Class expressions

Una class expression e' un altro modo di definire una classe. In questo caso possono avere un nome o meno. Il nome dato e' locale al corpo della classe.

// unnamed
var Polygon = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
var Polygon = class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

Corpo della classe e definizione dei metodi

Il corpo di una classe e' la parte inclusa tra le parentesi graffe {}. Qui si definiscono i membri della classe come il costruttore o i metodi della classe.

Strict mode

I corpi di class declarations e class expression sono esecuiti in strict mode.

Costruttore

Il costruttore e' un metodo speciale usato per creare ed inizializzare  un oggetto. Ci puo' essere un sono metodo con il come  "constructor" in una classe. Se la classe contiene piu' di una occorrenza del costruttore verra' sollevato un SyntaxError.

Un costruttore puo' usare la parola chiave super per richiamare il costruttore della classe padre.

Prototipi

Guarda anche method definitions.

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  
  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width;
  }
}

Metodi statici

La parola chiave static definisce un metodo statico. I metodi statici sono chiamati senza istanziare la loro classe e non sono chiamati quando una classe e' istanziata. Vengono usati per creare funzioni di utilita'.

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.sqrt(dx*dx + dy*dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

Sottoclassi con extends

La keyword extends viene usata nelle class declarations o class expressions per creare una classe figlia di un'altra classe.

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + ' barks.');
  }
}

Sub classing built-in objects

TBD

Super class calls with super

La keyword super e' usata per chiamare le funzioni di un oggetto padre.

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

ES5 inheritance syntax and ES6 classes syntax compared

TBD

Esempi

TBD

Specifications

Browser compatibility

See also

• Functions
• class declaration
• class expression
• super
• Blog post: "ES6 In Depth: Classes"