Share
Jeg vil gjerne dele med deg en serie artikler om ECMAScript 6, dele min lidenskap for det og forklare hvordan det kan fungere for deg. Jeg håper du liker å lese dem så mye som jeg skrev dem.
For det første jobber jeg i Microsoft på nettleserenes renderingsmotor for Microsoft Edge, som er en stor forbedring over Internet Explorer-motoren vi kjente (og kjærlighet?) Gjennom årene. Min personlige favorittfunksjon er at den støtter mye ECMAScript 6. For meg er dette en stor fordel når du skriver store applikasjoner på nettet.
Vi har nå nesten 70% av ECMAScript 6-funksjonene i Microsoft Edge så langt, ifølge http://kangax.github.io/compat-table/es6/ og ES6 på dev.modern.ie/platform/status.
Jeg elsker JavaScript, men når det gjelder å jobbe på store prosjekter som Babylon.js, foretrekker jeg TypeScript, som nå driver Angular 2. Årsaken er at JavaScript (ellers kjent som ECMAScript 5) ikke har alle syntaksfunksjonene jeg er vant til fra andre språk. Jeg skriver store prosjekter i. Jeg savner klasser og arv, for eksempel.
Så uten videre, la oss komme inn på nettopp det:
JavaScript er et prototyporientert språk og det er mulig å simulere klasser og arv med ECMAScript 5.
Fleksibiliteten til funksjoner i JavaScript tillater oss å simulere innkapslingen vi er vant til når vi arbeider med klasser. Trikset vi kan bruke for det er å forlenge prototypen til et objekt:
Accentsconagua
var Animal = (funksjon () funksjon Dyr (navn) this.name = name; // Metoder Animal.prototype.doSomething = function () console.log ("Jeg er en" + dette.navnet); ; returnere dyr;) (); var løve = nytt dyr ("løve"); lion.doSomething ();Vi kan se her at vi definerte en "klasse"Med"eiendommer"Og"fremgangsmåter”.
Konstruktøren er definert av selve funksjonen (funksjon Dyr) der vi kan instantiere egenskaper. Ved å bruke prototypen kan vi definere funksjoner som vil bli vurdert som eksempelmetoder.
Dette fungerer, men det antar at du vet om prototypisk arv, og for noen som kommer fra et klassebasert språk ser det veldig forvirrende ut. Merkelig nok har JavaScript et klassesøkeord, men det gjør ikke noe. ECMAScript 6 gjør nå dette arbeidet, og gir kortere kode:
klasse AnimalES6 konstruktør (navn) this.name = name; doSomething () console.log ("Jeg er en" + dette.navnet); var lionES6 = nytt AnimalES6 ("Lion"); lionES6.doSomething ();Resultatet er det samme, men dette er lettere å skrive og lese for utviklere som er vant til å skrive klasser. Det er ikke behov for prototypen, og du kan bruke ny søkeord for å definere konstruktøren.
Videre innfører klasser en rekke nye semantikk som ikke er til stede i ECMAScript 5-ekvivalenten. For eksempel kan du ikke ringe en konstruktør uten ny, og du kan ikke forsøke å konstruere metoder med ny. En annen endring er at metodene er ikke-talbare.
Interessant punkt her: Begge versjonene kan leve side ved side.
På slutten av dagen, selv med de nye søkeordene, ender du med en funksjon med en prototype der en funksjon ble lagt til. En "metode" her er bare en funksjonsegenskap på objektet ditt.
To andre kjernefunksjoner av klassebasert utvikling, getters og setters, støttes også i ES6. Dette gjør det mye tydeligere hva en metode skal gjøre:
klasse AnimalES6 konstruktør (navn) this.name = name; this._age = 0; få alder () return this._age; angi alder (verdi) hvis (verdi < 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;Ganske hendig, ikke sant?
Men vi kan se her en vanlig advarsel av JavaScript: "ikke privat" privatmedlem (_alder). Jeg skrev en artikkel for en stund siden om dette emnet.
Heldigvis har vi nå en bedre måte å gjøre dette på med en ny funksjon i ECMAScript 6: symboler.
var ageSymbol = Symbol (); klasse AnimalES6 konstruktør (navn) this.name = name; dette [ageSymbol] = 0; få alder () returner dette [ageSymbol]; angi alder (verdi) hvis (verdi < 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;Så hva er et symbol? Dette er en unik og uforanderlig datatype som kan brukes som en identifikator for objektegenskaper. Hvis du ikke har symbolet, kan du ikke få tilgang til eiendommen.
Dette fører til en mer "privat" tilgang til medlemmet.
Eller, i det minste, mindre lett tilgjengelig. Symboler er nyttige for navnetes unikthet, men unikthet innebærer ikke personvern. Unikhet betyr bare at hvis du trenger en nøkkel som ikke må være i konflikt med noen annen nøkkel, opprett et nytt symbol.
Men dette er ikke veldig privat ennå, fordi, takk til Object.getOwnPropertySymbols, Nedstrøms forbrukere kan få tilgang til dine symbolegenskaper.
Når vi har klasser, vil vi også ha arv. Det er igjen - mulig å simulere arv i ES5, men det er ganske komplisert å gjøre.
For eksempel, her er det som produseres av TypeScript for å simulere arv:
var __extends = this .__ strekker seg || funksjon (d, b) for (var p i b) hvis (b.hasOwnProperty (p)) d [p] = b [p]; funksjon __ () this.constructor = d; __. prototype = b.prototype; d.prototype = nytt __ (); ; var SwitchBooleanAction = (funksjon (_super) __extends (SwitchBooleanAction, _super); funksjon SwitchBooleanAction (triggerOptions, target, propertyPath, tilstand) _super.call (dette, triggerOptions, condition); this.propertyPath = propertyPath; this._target = target ; SwitchBooleanAction.prototype.execute = function () this._target [this._property] =! This._target [this._property];; returner SwitchBooleanAction;) (BABYLON.Action);
Ikke veldig lett å lese.
Men ECMAScript 6-alternativet er bedre:
var legsCountSymbol = Symbol (); klassen InsectES6 utvider AnimalES6 konstruktør (navn) super (navn); dette [legsCountSymbol] = 0; få benCount () returner dette [legsCountSymbol]; sett benCount (verdi) hvis (verdi < 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(); Takk til strekker søkeord kan du spesialisere en klasse i en barneklasse mens du holder referanse til rotklassen med super søkeord.
Med alle disse flotte tilleggene er det nå mulig å lage klasser og arbeide med arv uten å håndtere prototype voodoo magi.
Med alle disse nye funksjonene tilgjengelig på våre nettlesere, tror jeg det er enda mer relevant å bruke TypeScript til å generere JavaScript-kode.
Først begynte den nyeste versjonen av TypeScript (1.4) å legge til støtte for ECMAScript 6-kode (med la og konst søkeord), så du må bare beholde din eksisterende TypeScript-kode og aktivere dette nye alternativet til å begynne å generere ECMAScript 6-kode.
Men hvis du ser nøye på noen TypeScript, finner du at dette ser ut som ECMAScript 6 uten typene. Så å lære TypeScript i dag er en fin måte å forstå ECMAScript 6 i morgen!
Ved hjelp av TypeScript kan du ha alt dette nå over nettlesere, ettersom koden din blir konvertert til ECMAScript 5. Hvis du vil bruke ECMAScript 6 direkte i nettleseren, kan du oppgradere til Windows 10 og teste med Microsoft Edge's renderingsmotor der.
Hvis du ikke vil gjøre det bare for å prøve ut noen nye nettleserfunksjoner, kan du også få tilgang til en Windows 10-datamaskin med Microsoft Edge på remote.modern.ie. Dette fungerer også på Mac OS eller Linux-boksen.
Selvfølgelig er Microsoft Edge ikke den eneste nettleseren som støtter den åpne standarden ES6. Andre nettlesere er også om bord, og du kan spore støttenivået på: http://kangax.github.io/compat-table/es6/.
Fremtiden for JavaScript med ECMAScript 6 er lyst, og ærlig talt kan jeg ikke vente med å se det mye støttet på alle moderne nettlesere!
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
