JavaScript on kehittynyt merkittävästi vuosien varrella. Erityisesti ES6:n käyttöönoton myötä ohjelmointi luokkien avulla on tullut huomattavasti helpommaksi. Vanha tapa luoda luokkia prototyyppien ja konstruktorifunktioiden avulla oli usein hankala ja altis virheille. Tässä oppaassa opit, kuinka voit käyttää uutta class-syntaksia tehokkaasti ja mitkä erot ovat vanhan ja uuden kirjoitustavan välillä. Lisäksi opit, kuinka voit laajentaa luokkakokonaisuuttasi perinnön avulla.
Tärkeimmät havainnot
- Uusi class-syntaksi mahdollistaa selkeämmän ja tiiviimmän määrittelymuodon.
- Konstruktorien käyttö on helpompaa eikä vaadi erillisiä prototyyppejä.
- Class-syntaksin toiminnallisuus pysyy prototyyppipohjaisena.
Vaiheittainen opas
1. Vanhan kirjoitustavan ymmärtäminen
Huomatakseen uusien luokkien syntaksin etuja, tarkastellaan ensin vanhaa menetelmää. Tässä luotiin konstruktorifunktio ja metodeja lisättiin prototyypin kautta.
Kun haluat luoda uuden objektin, se tapahtuu new Shape(1, 100, 200) -komennolla. Tämän jälkeen objektia shape voidaan käyttää ominaisuuksien hakemiseen.
2. Arvojen näyttäminen
Varmistaaksemme, että objekti-instanssimme toimii oikein, tulostamme ominaisuudet x ja y.
3. Uuden class-syntaksin käyttöönotto
Siirrymme nyt uuteen class-syntaksiin, joka on saatavilla ES6:sta lähtien.
Muutos on selkeä: et enää tarvitse erillistä prototyyppiä. Sen sijaan määrittelet kaikki metodit itse luokan sisällä.
4. Olioiden luominen uudella luokalla
Objektin luominen uuden syntaksin avulla tapahtuu samalla tavalla kuin aiemmin. Käytät new-komentoa luokan Shape instanssin aikaansaamiseksi.
5. Uuden luokan käyttö
Uuden määritellyn luokan käyttö on sama kuin vanhassa menetelmässä. Voit käyttää instanssia shape1 arvojen hakemiseen ja move-metodin käyttämiseen.
6. Perintö luokissa
Toinen etu class-syntaksissa on perinnön mahdollisuus. Jos haluat luoda uuden luokan, joka periä olemassa olevan luokan, voit käyttää extends-avainsanaa.
Tässä lapsiluokan konstruktorissa super() kutsuu vanhemluokan konstruktorin. Tämä mahdollistaa Shape-ominaisuuksien hyödyntämisen samalla, kun määrität ainutlaatuisia ominaisuuksia Rectangle-luokalle.
7. Yhteenveto class-määritelmästä
Class-syntaksi ei ainoastaan selkeytä koodikantaa, vaan se myös mahdollistaa selkeämmän rakenteen objektipohjaisten käsitteiden työskentelyssä. Voit luoda luokkien lisäksi myös monimutkaisempia perintöhierarkioita, mikä tekee koodistasi joustavampaa ja helpommin ylläpidettävää.
Yhteenveto – Uuden luokan syntaksi JavaScriptissä: ES6–ES13
Tässä oppaassa olet oppinut, kuinka voit hyödyntää uutta class-syntaksia JavaScriptissä ES6:sta ES13:een tehokkaasti. Vanha luokkakäytännön menetelmä oli usein vaivalloista ja virhealtista, kun taas uusi syntaksi mahdollistaa selkeän ja yksinkertaisen rakenteen. Olet myös oppinut perinnön perusteet extends-syntaksin avulla, jotta voit laajentaa luokkiasi entisestään.
Usein kysytyt kysymykset
Mikä on ero vanhan ja uuden luokkasyntaksin välillä?Vanha menetelmä käyttää konstruktorifunktioita ja prototyyppejä, kun taas uusi syntaksi yksinkertaistaa luokkien määrittelyn ja käytön.
miksi minun pitäisi käyttää uutta class-syntaksia?Se tarjoaa selkeämmän, tiiviimmän ja intuitiivisemman tavan luokkien määrittelyyn, mikä parantaa koodin ylläpidettävyyttä ja luettavuutta.
Kuinka perintö toimii class-syntaksissa?Luokkasi voi periä toisen luokan toimintoja extends-avainsanan avulla kutsumalla vanhemluokan konstruktorin super():lla.
