Share
Ik wil graag een reeks artikelen over ECMAScript 6 met u delen, mijn passie ervoor delen en uitleggen hoe dit voor u kan werken. Ik hoop dat je ze net zo leuk leest als ik ze heb geschreven.
Ten eerste werk ik in Microsoft aan de browser-renderingengine voor Microsoft Edge, wat een enorme verbetering is ten opzichte van de Internet Explorer-engine die we in de loop der jaren hebben leren kennen (en liefhebben?). Mijn persoonlijke favoriete eigenschap ervan is dat het veel ECMAScript 6 ondersteunt. Voor mij is dit een enorm voordeel bij het schrijven van grote applicaties voor het web.
We hebben nu tot nu toe bijna 70% van de ECMAScript 6-functies in Microsoft Edge, volgens http://kangax.github.io/compat-table/es6/ en ES6 op dev.modern.ie/platform/status.
Ik ben dol op JavaScript, maar als het gaat om het werken aan grote projecten zoals Babylon.js, geef ik de voorkeur aan TypeScript, dat momenteel Angular 2 aanstuurt. De reden is dat JavaScript (ook bekend als ECMAScript 5) niet alle syntaxisfuncties heeft die ik gewend ben van andere talen waarin ik grote projecten schrijf. Ik mis bijvoorbeeld klassen en overerving, bijvoorbeeld.
Dus zonder verder oponthoud, laten we beginnen met dat:
JavaScript is een prototype-georiënteerde taal en het is mogelijk om klassen en overerving te simuleren met ECMAScript 5.
De flexibiliteit van functies in JavaScript stelt ons in staat de inkapseling te simuleren die we gewend zijn wanneer we met klassen omgaan. De truc die we daarvoor kunnen gebruiken, is om het prototype van een object uit te breiden:
Accentsconagua
var Animal = (function () function Dier (naam) this.name = name; // Methods Animal.prototype.doSomething = function () console.log ("Ik ben een" + this.name); ; return Animal;) (); var lion = new Animal ("Lion"); lion.doSomething ();We kunnen hier zien dat we een "klasse"Met"eigenschappen"En"methoden”.
De constructor wordt gedefinieerd door de functie zelf (functie Dier) waar we eigenschappen kunnen instantiëren. Door het prototype te gebruiken, kunnen we functies definiëren die als voorbeeldmethoden worden beschouwd.
Dit werkt, maar het gaat ervan uit dat je weet over prototypische overerving, en voor iemand die afkomstig is van een op klassen gebaseerde taal ziet het er erg verwarrend uit. Vreemd genoeg heeft JavaScript een class-sleutelwoord, maar het doet niets. ECMAScript 6 maakt dit nu aan het werk en zorgt voor kortere code:
klasse AnimalES6 constructor (naam) this.name = naam; doSomething () console.log ("Ik ben een" + this.name); var lionES6 = new AnimalES6 ("Lion"); lionES6.doSomething ();Het resultaat is hetzelfde, maar dit is gemakkelijker te schrijven en te lezen voor ontwikkelaars die gewend zijn lessen te schrijven. Het prototype is niet nodig en u kunt het nieuwe sleutelwoord om de constructor te definiëren.
Verder introduceren klassen een aantal nieuwe semantieken die niet aanwezig zijn in het equivalent van ECMAScript 5. U kunt bijvoorbeeld een constructeur niet zonder bellen nieuwe, en je kunt niet proberen methoden te maken met nieuwe. Een andere verandering is dat methoden niet-opsombaar zijn.
Interessant punt hier: beide versies kunnen naast elkaar leven.
Aan het einde van de dag, zelfs met de nieuwe sleutelwoorden, krijg je een functie met een prototype waarin een functie is toegevoegd. Een "methode" is hier gewoon een functie-eigenschap op uw object.
Twee andere kernkenmerken van op klassen gebaseerde ontwikkeling, getters en setters worden ook ondersteund in ES6. Dit maakt het veel duidelijker wat een methode moet doen:
klasse AnimalES6 constructor (naam) this.name = naam; this._age = 0; krijgt de leeftijd () return this._age; stel leeftijd (waarde) if (waarde < 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;Best handig, toch?
Maar we kunnen hier een algemene waarschuwing voor JavaScript zien: het privélid "niet echt privé" (_leeftijd). Ik schreef enige tijd geleden een artikel over dit onderwerp.
Gelukkig hebben we nu een betere manier om dit te doen met een nieuwe functie van ECMAScript 6: symbolen.
var ageSymbol = Symbol (); klasse AnimalES6 constructor (naam) this.name = naam; dit [ageSymbol] = 0; word leeftijd () stuur dit [ageSymbol]; stel leeftijd (waarde) if (waarde < 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;Dus wat is een symbool? Dit is een uniek en onveranderlijk gegevenstype dat kan worden gebruikt als een ID voor objecteigenschappen. Als u niet over het symbool beschikt, hebt u geen toegang tot de eigenschap.
Dit leidt tot een meer "private" toegang voor leden.
Of op zijn minst minder gemakkelijk toegankelijk. Symbolen zijn nuttig voor de uniciteit van de naam, maar uniekheid betekent geen privacy. Uniciteit betekent alleen dat als u een sleutel nodig hebt die niet conflicteert met een andere sleutel, een nieuw symbool moet maken.
Maar dit is nog niet echt privé omdat, dankzij Object.getOwnPropertySymbols, downstream-consumenten hebben toegang tot uw symbooleigenschappen.
Zodra we klassen hebben, willen we ook overerving hebben. Het is - wederom - mogelijk om overerving in ES5 te simuleren, maar het is behoorlijk ingewikkeld om te doen.
Hier bijvoorbeeld wat wordt geproduceerd door TypeScript om overerving te simuleren:
var __extends = this .__ extends || functie (d, b) voor (var p in b) if (b.hasOwnProperty (p)) d [p] = b [p]; function __ () this.constructor = d; __. prototype = b.prototype; d.prototype = nieuw __ (); ; var SwitchBooleanAction = (functie (_super) __extends (SwitchBooleanAction, _super); function SwitchBooleanAction (triggerOptions, target, propertyPath, condition) _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);
Niet echt gemakkelijk te lezen.
Maar het alternatief ECMAScript 6 is beter:
var legsCountSymbol = Symbol (); klasse InsectES6 breidt AnimalES6 uit constructor (naam) super (naam); dit [legsCountSymbol] = 0; krijg legsCount () retourneer dit [legsCountSymbol]; set legsCount (waarde) if (waarde < 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(); Dankzij de strekt trefwoord kunt u een klasse specialiseren in een onderliggende klasse terwijl u de verwijzing naar de hoofdklasse bijhoudt met de super trefwoord.
Met al deze geweldige toevoegingen is het nu mogelijk om klassen te maken en te werken met overerving zonder te maken te hebben met prototype voodoo-magie.
Omdat al deze nieuwe functies beschikbaar zijn in onze browsers, denk ik dat het nog relevanter is om TypeScript te gebruiken om JavaScript-code te genereren.
Allereerst begon de nieuwste versie van TypeScript (1.4) met het toevoegen van ondersteuning voor ECMAScript 6 code (met de laat en const sleutelwoorden), dus u hoeft alleen uw bestaande TypeScript-code te behouden en deze nieuwe optie in te schakelen om ECMAScript 6-code te genereren.
Maar als je goed naar een TypeScript kijkt, zul je zien dat dit lijkt op ECMAScript 6 zonder de typen. Dus vandaag is het leren van TypeScript een prima manier om morgen ECMAScript 6 te begrijpen!
Met TypeScript kunt u dit alles nu in verschillende browsers plaatsen terwijl uw code wordt omgezet in ECMAScript 5. Als u ECMAScript 6 rechtstreeks in de browser wilt gebruiken, kunt u een upgrade naar Windows 10 uitvoeren en daar met de renderingengine van Microsoft Edge testen.
Als u dat niet alleen wilt doen om een aantal nieuwe browserfuncties uit te proberen, kunt u ook toegang krijgen tot een Windows 10-computer met Microsoft Edge op remote.modern.ie. Dit werkt ook op uw Mac OS- of Linux-box.
Natuurlijk is Microsoft Edge niet de enige browser die de open standaard ES6 ondersteunt. Andere browsers zijn ook aan boord en u kunt het ondersteuningsniveau volgen op: http://kangax.github.io/compat-table/es6/.
De toekomst van JavaScript met ECMAScript 6 is helder en eerlijk gezegd kan ik niet wachten om het breed ondersteund te zien worden in alle moderne browsers.!
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
