Share
Mi piacerebbe condividere con voi una serie di articoli su ECMAScript 6, condividendo la mia passione per questo e spiegando come può funzionare per voi. Spero che ti piaccia leggerli tanto quanto li ho scritti io.
Innanzitutto, lavoro in Microsoft sul motore di rendering del browser per Microsoft Edge, che rappresenta un enorme miglioramento rispetto al motore di Internet Explorer che abbiamo conosciuto (e che amiamo?) Nel corso degli anni. La mia caratteristica preferita di questo è che supporta molti ECMAScript 6. Per me, questo è un enorme vantaggio quando si scrivono applicazioni di grandi dimensioni per il web.
A oggi abbiamo quasi il 70% delle funzionalità di ECMAScript 6 in Microsoft Edge, secondo http://kangax.github.io/compat-table/es6/ e ES6 su dev.modern.ie/platform/status.
Adoro JavaScript, ma quando si tratta di lavorare su progetti di grandi dimensioni come Babylon.js, preferisco TypeScript, che ora alimenta anche Angular 2. Il motivo è che JavaScript (altrimenti noto come ECMAScript 5) non ha tutte le funzioni di sintassi a cui sono abituato da altre lingue in cui scrivo progetti di grandi dimensioni. Mi mancano classi ed ereditarietà, ad esempio.
Quindi, senza ulteriori indugi, entriamo proprio in questo:
JavaScript è un linguaggio orientato al prototipo ed è possibile simulare classi ed ereditarietà con ECMAScript 5.
La flessibilità delle funzioni in JavaScript ci consente di simulare l'incapsulamento a cui siamo abituati quando si ha a che fare con le classi. Il trucco che possiamo usare è estendere il prototipo di un oggetto:
Accentsconagua
var Animal = (function () function Animal (name) this.name = name; // Methods Animal.prototype.doSomething = function () console.log ("I'm a" + this.name); ; return Animal;) (); var lion = new Animal ("Lion"); lion.doSomething ();Possiamo vedere qui che abbiamo definito un "classe" con "proprietà" e "metodi”.
Il costruttore è definito dalla funzione stessa (funzione Animale) dove possiamo istanziare proprietà. Utilizzando il prototipo possiamo definire funzioni che saranno considerate come metodi di istanza.
Funziona, ma si presuppone che tu conosca l'ereditarietà prototipica e per qualcuno che proviene da un linguaggio basato su classi sembra molto confuso. Stranamente, JavaScript ha una parola chiave di classe, ma non fa nulla. ECMAScript 6 ora funziona e consente un codice più breve:
classe AnimalES6 costruttore (nome) this.name = nome; doSomething () console.log ("I'm a" + this.name); var lionES6 = new AnimalES6 ("Lion"); lionES6.doSomething ();Il risultato è lo stesso, ma è più facile da scrivere e leggere per gli sviluppatori che sono abituati a scrivere classi. Non è necessario il prototipo e puoi usare il nuovo parola chiave per definire il costruttore.
Inoltre, le classi introducono una serie di nuove semantiche che non sono presenti nell'equivalente ECMAScript 5. Ad esempio, non è possibile chiamare un costruttore senza nuovo, e non puoi tentare di costruire metodi con nuovo. Un altro cambiamento è che i metodi non sono enumerabili.
Punto interessante qui: entrambe le versioni possono vivere fianco a fianco.
Alla fine della giornata, anche con le nuove parole chiave, si finisce con una funzione con un prototipo in cui è stata aggiunta una funzione. Un "metodo" qui è semplicemente una proprietà di funzione sul tuo oggetto.
Altre due funzionalità fondamentali di sviluppo, getter e server di classe, sono supportate anche in ES6. Ciò rende molto più ovvio ciò che un metodo dovrebbe fare:
classe AnimalES6 costruttore (nome) this.name = nome; this._age = 0; get age () return this._age; imposta l'età (valore) if (valore < 0) console.log("We do not support undead animals"); this._age = value; doSomething() console.log("I'm a " + this.name); var lionES6 = new AnimalES6("Lion"); lionES6.doSomething(); lionES6.age = 5;Abbastanza utile, giusto?
Ma possiamo vedere qui un avvertimento comune di JavaScript: il membro privato "non proprio privato" (_età). Ho scritto un articolo qualche tempo fa su questo argomento.
Per fortuna, ora abbiamo un modo migliore per farlo con una nuova funzionalità di ECMAScript 6: i simboli.
var ageSymbol = Symbol (); classe AnimalES6 costruttore (nome) this.name = nome; questo [ageSymbol] = 0; get age () return this [ageSymbol]; imposta l'età (valore) if (valore < 0) console.log("We do not support undead animals"); this[ageSymbol] = value; doSomething() console.log("I'm a " + this.name); var lionES6 = new AnimalES6("Lion"); lionES6.doSomething(); lionES6.age = 5;Allora, cos'è un simbolo? Questo è un tipo di dati unico e immutabile che potrebbe essere utilizzato come identificativo per le proprietà dell'oggetto. Se non si dispone del simbolo, non è possibile accedere alla proprietà.
Questo porta ad un accesso più "privato" ai membri.
O, almeno, meno facilmente accessibile. I simboli sono utili per l'unicità del nome, ma l'unicità non implica la privacy. Unicità significa semplicemente che se hai bisogno di una chiave che non deve entrare in conflitto con nessun'altra chiave, crea un nuovo simbolo.
Ma questo non è ancora molto privato perché, grazie a Object.getOwnPropertySymbols, i consumatori a valle possono accedere alle proprietà dei simboli.
Una volta che abbiamo classi, vogliamo anche avere ereditarietà. È ancora una volta possibile simulare l'ereditarietà in ES5, ma è piuttosto complesso da fare.
Ad esempio, ecco cosa viene prodotto da TypeScript per simulare l'ereditarietà:
var __extends = this .__ extends || function (d, b) for (var p in b) if (b.hasOwnProperty (p)) d [p] = b [p]; function __ () this.constructor = d; __. prototype = b.prototype; d.prototype = new __ (); ; var SwitchBooleanAction = (function (_super) __extends (SwitchBooleanAction, _super); function SwitchBooleanAction (triggerOptions, target, propertyPath, condizione) _super.call (this, triggerOptions, condition); this.propertyPath = propertyPath; this._target = target ; SwitchBooleanAction.prototype.execute = function () this._target [this._property] =! This._target [this._property]; return SwitchBooleanAction;) (BABYLON.Action);
Non è davvero facile da leggere.
Ma l'alternativa ECMAScript 6 è migliore:
var legsCountSymbol = Symbol (); class InsectES6 estende AnimalES6 costruttore (nome) super (nome); this [legsCountSymbol] = 0; get legsCount () return this [legsCountSymbol]; imposta legsCount (valore) if (valore < 0) console.log("We do not support nether or interstellar insects"); this[legsCountSymbol] = value; doSomething() super.doSomething(); console.log("And I have " + this[legsCountSymbol] + " legs!"); var spiderES6 = new InsectES6("Spider"); spiderES6.legsCount = 8; spiderES6.doSomething(); Grazie al si estende parola chiave puoi specializzare una classe in una classe figlia mantenendo il riferimento alla classe radice con il super parola chiave.
Con tutte queste fantastiche aggiunte, è ora possibile creare classi e lavorare con l'ereditarietà senza occuparsi del prototipo di magia voodoo.
Con tutte queste nuove funzionalità disponibili sui nostri browser, penso che sia ancora più rilevante usare TypeScript per generare codice JavaScript.
Prima di tutto, l'ultima versione di TypeScript (1.4) ha iniziato ad aggiungere il supporto per il codice ECMAScript 6 (con il permettere e const parole chiave), quindi è sufficiente mantenere il codice TypeScript esistente e abilitare questa nuova opzione per avviare la generazione del codice ECMAScript 6.
Ma se guardi da vicino alcuni TypeScript scoprirai che questo sembra ECMAScript 6 senza i tipi. Quindi, l'apprendimento di TypeScript oggi è un ottimo modo per capire ECMAScript 6 domani!
Usando TypeScript, puoi avere tutto questo ora attraverso i browser quando il tuo codice viene convertito in ECMAScript 5. Se vuoi utilizzare ECMAScript 6 direttamente nel browser, puoi eseguire l'upgrade a Windows 10 e testare con il motore di rendering di Microsoft Edge lì.
Se non vuoi farlo solo per provare alcune nuove funzionalità del browser, puoi anche accedere a un computer Windows 10 con Microsoft Edge su remote.modern.ie. Funziona anche su Mac OS o Linux.
Ovviamente Microsoft Edge non è l'unico browser che supporta lo standard ES6 aperto. Anche altri browser sono a bordo e puoi monitorare il livello di supporto su: http://kangax.github.io/compat-table/es6/.
Il futuro di JavaScript con ECMAScript 6 è brillante e onestamente non vedo l'ora di vederlo ampiamente supportato su tutti i browser moderni!
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
