Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ES6
Code

ECMAScript 6 Power bemutató: Osztály és öröklés

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called ECMAScript 6 Power Tutorial.
ECMAScript 6 Power Tutorial: Template Strings
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Hungarian (Magyar) translation by Bózsó Péter (you can also view the original English article)

Meg szeretnék osztani veled cikkek egy sorozatát ECMAScript 6-ról, megosztva a szenvedélyemet ehhez és elmagyarázni hogyan dolgozhat ez neked. Remélem annyira élvezed olvasni őket, mint ahogy én írtam.

Először, Microsoftban dolgozom a böngészőn motort renderelve a Microsoft Edge-hez, ami egy hatalmas javulás az Internet Explorer motoron amit tudnunk (és szeretnünk?) kell az évek alatt. A személyes kedvenc lehetőségem benne, hogy rengeteg ECMAScript 6-ot támogat. Nekem, ez egy masszív haszon mikor nagy alkalmazásokat írok a webhez.

Nekünk most van majdnem 70%-a az ECMAScript lehetőségeknek Microsoft Edgeben eddig, a http://kangax.github.io/compat-table/es6/ szerint. és ES6 on dev.modern.ie/platform/status.

Table of ECMAScript 6 features on Microsoft Edge

Szeretem a JavaScriptet, de mikor nagy projekteken kell dolgozni, mint például Babylon.js, jobban szeretem a TypeScriptet, ami most ellátja az Angular 2-t egyébként. Az az oka, hogy a JavaScript (másképp ismerve ECMAScript 5) nem rendelkezik az összes szintax lehetőséggel amit használtam más nyelvekből, hogy nagy projekteket írjak bele. Kihagyok osztályokat és örökléseket, például.

Szóval további hűhó nélkül, essünk bele:

1. Egy osztály készítése

A JavaScript egy prototípus-orientált nyelv és lehetséges szimulálni osztályokat és örökléseket ECMAScript 5-el.

Ez a rugalmassága a funkcióknak JavaScriptben lehetővé teszi nekünk szimulálni a kapszulázást amit használtunk mikor az osztályokkal foglalkoztunk. A trükk amit használhatunk ehhez az egy objektum prototípusának kiterjesztése:

Itt láthatjuk, hogy definiáltuk az "osztályt" a "tulajdonságokkal" és "módszerekkel".

A konstruktőr definiálva van a funkciótól magától (funkció Animal) ahol példányosítani tudjuk a tulajdonságokat. A prototípus használatával definiálni tudunk funkciókat ami figyelembe lesz véve mint például példa módok.

Ez működik, de feltételezi, hogy tudsz a prototípus öröklésről, és valamihez ami egy osztály-alapú nyelvből jön ez nagyon zavaróan néz ki. Különösen elég, a JavaScript egy osztály billentyűzettel rendelkezik, de ez nem csinál semmit. Az ECMAScript 6 most megcsinálja ezt a munkát, lehetővé teszi a rövidebb kódot:

Az eredmény ugyanaz, de ez könnyebben írható és olvasható fejlesztőknek akik osztályokat írnak. Nincs szükség a prototípusra, és használhatod az új kulcsszót a konstruktőr definiálására.

Továbbá, az osztályok növelik az új szemantikák számát ami nincs bemutatva az ECMAScript 5-ben egyenértékűen. Például, nem hívhatod az összes konstruktőrt új nélkül, és nem kísérletezhetsz konstrukciós módszerekkel újal. Másik változás, hogy a módszerek nem számolhatóak.

Érdekes pont itt: Mindkét verzió tud élni oldalról oldalra.

És a nap végén, még az új kulcsszavakkal is, végzel egy funkcióval egy prototípussal ahol a funkció hozzá lett adva. Egy "módszer" itt egyszerűen egy funkció tulajdonság az objektumodon.

Két másik mag újdonságai az osztály-alapú fejlesztésnek, a getterek és setterek, amik szintén támogatva vannak ES6-ban. Ez sokkal nyilvánvalóbbá teszi mi akar lenni egy módszer:

Nagyon ügyes, igaz?

De láthatjuk a közös ellentmondását a JavaScriptnek: a "nem nagyon privát" privát tag (_age) Írtam egy cikket egy ideje ezen a témán.

Hálásal, most van egy jobb módszerünk ezt csinálni egy új lehetőségével az ECMAScript 6-nak: szimbólumok.

Szóval, mi a szimbólum? Ez egy egyedi és változhatatlan adat típus ami használható azonosítóként objektum tulajdonságokhoz. Ha nincs meg a szimbólumod, nincs hozzáférésed a tulajdonsághoz.

Ez vezeti a "privátabb" tag hozzáférést.

Vagy, legalább, kevésbé könnyű hozzáférhetőséget. A szimbólumok hasznosak a név egyediségéhez, de az egyediség nem foglalja magába a privát védelmet. Az egyediség csak azt jelenti, hogy ha szükséged van egy kulcsra ami nem kerül konfliktusba a többi kulccsal, készíts egy új szimbólumot.

De ez még nem nagyon privát, mert az Object.getOwnPropertySymbols-nak köszönhetően, a továbbfelhasználók hozzáférhetnek a te szimbólum tulajdonságaidhoz.

2. Kezelési öröklés

Mikor megvannak az osztályaink, akarunk öröklést is. Ez-mégegyszer- szimulálható az öröklés ES5-ben, de nagyon összetett.

Például, itt van ami elő lett állítva TypeScripttel szimulálni az öröklést:

Nem valami könnyű olvasni.

De az ECMAScript 6 alternatívja jobb:

Az extends kulcsszónak köszönhetően specializálni tudsz egy osztályt egy gyerekosztállyá mialatt megtartod a hivatkozást a gyökér osztályhoz a super kulcsszóval.

Ezekkel a nagyszerű kiegészítésekkel, most lehetséges osztályokat készíteni és örökléssel dolgozni a prototípus voodoo mágiára való tekintet nélkül.

3. Miért relevánsabb még jobban a TypeScript használata mint korábban

Ezekkel az új lehetőségekkel elérhető a böngészőinket, azt gondolom még relevánsabb a TypeScript használata hogy JavaScript kódokat készítsünk.

Először, a legújabb verziója a TypeScriptnek (1.4) elkezdett támogatást hozzáadni az ECMAScript 6 kódhoz (a let és const kulcsszavakkal), szóval neked csak fognod kell a már létező TypeScript kódodat és engedélyezni ezt az új opciót ECMAScript 6 kód generálásának elkezdésére.

De ha közelebbről nézel néhány TypeScriptet, azt fogod találni, hogy úgy néz ki mint az ECMAScript 6 a típusok nélkül. Szóval a mai TypeScript tanulás egy nagyon jó módszer az ECMAScript 6 megértésére holnap!

Következtetés

A TypeScript használatával, megtarthatod böngészők között mikor a kódod konvertálódik ECMAScript 5-be. Ha használni akarod az ECMAScript 6-ot közvetlenül a böngészőben, fejlesztheted Windows 10-re és tesztelheted a Microsoft Edge renderelő motorjával itt.

Ha nem akarod ezt csinálni, csak kipróbálni pár új böngésző lehetőséget, hozzáférhetsz egy Windows 10 számítógéphez Microsoft Edge-vel remote.modern.ie-n. Ez működik a Mac OS vagy Linux dobozon is.

Természetesen a Microsoft Edge nem az egyetlen böngésző ami támogatja a nyílt eredeti ES6-ot. Más böngészők is vannak a fedélzeten, és nyomon követheted a támogatás szintjét a: http://kangax.github.io/compat-table/es6/-on.

A JavaScript jövője az ECMAScript 6-tal fényes, és őszintén szólva nem tudom kivárni látni széleskörben támogatva az összes modern böngésző által!

Ez a cikk egy része a web tech sorozatnak a Microsofttól. Izgatottan osztjuk meg a Microsoft Edge és az új EdgeHTML renderelő motort veled. Szerezz ingyen virtuális gépeket vagy tesztelj távolról a Mac-eden, iOS, Android, vagy Windows eszközödön @ http://dev.modern.ie/.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.