Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

This is a new technology, part of the ECMAScript 2015 (ES6) standard.
This technology's specification has been finalized, but check the compatibility table for usage and implementation status in various browsers.

Draft
This page is not complete.

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 eredità object-oriented a Javascript. Le classi JavaScript forniscono una sintassi molto più semplice e pulita per create oggetti e aver a che fare con l'ereditarietà.

Definizione classi

Le classi sono di fatto delle "funzioni speciali", e così come puoi definire function expressions e function declarations, la sintassi per la classe ha due componenti: class expressionsclass declarations.

Dichiarazione classe

Un modo per definire una classe è 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 è che le dichiarazioni di funzione sono hoisted mentre quelle per le classi no. Bisogna dichiarare la classe e poi si può usarla, altrimenti il codice solleva un'eccezione ReferenceError:

var p = new Polygon(); // ReferenceError

class Polygon {}

Class expressions

Una class expression è un altro modo di definire una classe. In questo caso possono avere un nome o meno. Il nome dato è 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;
  }
};

Nota: anche le Class expressions soffrono degli stessi problemi di hoisting menzionati per le dichiarazioni di Classi.

Corpo della classe e definizione dei metodi

Il corpo di una classe è 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 eseguiti in strict mode.

Costruttore

Il costruttore è un metodo speciale usato per creare ed inizializzare un oggetto. Ci può essere un solo metodo con il nome "constructor" in una classe. Se la classe contiene più di un'occorrenza del costruttore verrà sollevato un SyntaxError.

Un costruttore può 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 possono essere chiamati su una classe istanziata. Vengono usati per creare funzioni di utilità.

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));

Inscatolamento con metodi prototipo e statico

Quando un metodo statico o prototipo è chiamato senza un oggetto valutato "this", allora il valore di "this" sarà undefined all'interno della funzione chiamata. L'autoinscatolamento non succederà. Il comportamento sarà lo stesso perfino se scriviamo il codice in modalità non-strict perché tutte le funzioni, metodi, costruttori, getter o setter sono eseguiti in modo strict. Così se non specifichiamo il valore this, allora sarà undefined.

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

Se scriviamo il codice soprascritto usando le tradizionali classi basate su funzioni, allora l'autoinscatolamento accadrà basato sul valore "this" peril quale la funzione è stata chiamata.

function Animal() { }

Animal.prototype.speak = function() {
  return this;
}

Animal.eat = function() {
  return this;
}

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

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.');
  }
}

Si possono anche estendere le classi tradizionali basate su funzioni:

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

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

var d = new Dog('Mitzie');
d.speak();

Sub classing built-in objects

TBD

Chiamare una superclasse con super

La keyword super è 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

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Class definitions' in that specification.
Standard Initial definition.

Browser compatibili

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 42.0 Nightly build ? No support 9.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support Nightly build ? ? ? 42.0

See also

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: Glitches, AAllegro91, afalchi82, huckbit, Cereal84, mrbabbs, Sheppy
 Ultima modifica di: Glitches,