JavaScript käyttää prototypal perintö: jokainen objekti perii ominaisuuksia ja menetelmiä sen prototyyppi esine.

perinteistä luokkaa, sillä Javan tai Swiftin kaltaisilla kielillä käytettyjä objektien luomistapoja ei ole Javascriptissä. Prototyyppiperintö käsittelee vain esineitä.

prototyyppiperintö voi jäljitellä klassista luokkaperintöä. Tuo perinteinen luokat JavaScript, ES2015 standardi esittelee class syntax: syntaktinen sokeri yli prototypal perintö.,

tämä viesti tutustuttaa JavaScript-tunneilla: kuinka määritellä luokka, alustaa instanssi, määritellä kentät ja menetelmät, ymmärtää yksityisiä ja julkisia kenttiä, tarttua staattisiin kenttiin ja menetelmiin.

1. Määritelmä: luokan avainsanan

erityinen avainsana class määritellään luokan JavaScript:

class User { // The body of class}

yllä Oleva koodi määrittelee luokan User. Kihara hammasraudat { } rajaa luokkarungon. Huomaa, että tämän syntaksin nimi on class declaration.,

sinun ei tarvitse ilmoittaa luokan nimeä. Käyttämällä luokan ilmaus voit määrittää luokan muuttuja:

const UserClass = class { // The body of class};

Voit helposti viedä luokan osana ES2015 moduuli. Tässä on syntaksi default vienti:

export default class User { // The body of class}

Ja nimetty vienti:

export class User { // The body of class}

luokka tulee hyödyllinen, kun luodaan luokan ilmentymä. Instanssi on objekti, joka sisältää luokan kuvaamaa dataa ja käyttäytymistä.,

new operaattori instantiates luokan JavaScript: instance = new Class().

esimerkiksi, voit instanssia User class käyttäen new käyttäjä:

const myUser = new User();

new User() luo esimerkiksi User luokka.

2. Alustus: rakentaja()

constructor(param1, param2, ...) on erityinen menetelmä kehossa luokka, joka alustaa esimerkiksi., Se on paikka, jossa asetat alkuarvot kentät, tai tehdä minkäänlaista objekti asetukset.

seuraavassa esimerkissä konstruktori asettaa alkuarvo kenttä name:

class User { constructor(name) { this.name = name; }}

User’s rakentaja on yksi parametri name, jota käytetään asettaa alkuarvo kenttä this.name.

rakentajan sisällä arvo vastaa vasta luotua instanssia.,

perustelut instantiate luokan tullut parametrit rakentaja:

class User { constructor(name) { name; // => 'Jon Snow' this.name = name; }}const user = new User('Jon Snow');

name parametri sisällä rakentaja on arvo 'Jon Snow'.

Jos luokalle ei määritellä rakentajaa, syntyy oletusarvo. Oletuskonstruktori on tyhjä funktio, joka ei muokkaa instanssia.

samaan aikaan JavaScript-luokassa voi olla jopa yksi rakentaja.

3. Kentät

Luokkakentät ovat muuttujia, joilla on tietoa., Kenttiä voidaan liittää 2 yhteisöt:

  1. Kentät luokka esimerkiksi
  2. Kentät luokka itse (aka staattinen)

– kentät, myös on 2 tasoa saavutettavuus:

  1. Public: kenttä on käytettävissä mistä tahansa
  2. Yksityinen: kenttä on käytettävissä vain kehossa luokka

3.1 Yleisen oikeusasteen kentille

katsotaanpa uudelleen edellisen koodinpätkä:

class User { constructor(name) { this.name = name; }}

lauseke this.name = name luo esimerkiksi kenttä name ja määrittää sen alkuarvo.,

Myöhemmin voit käyttää name kenttä käyttämällä accessor omaisuutta:

const user = new User('Jon Snow');user.name; // => 'Jon Snow'

name on julkinen kenttä, koska voit käyttää sitä ulkopuolella User luokan elin.

kun kentät luodaan implisiittisesti rakentajan sisälle, kuten edellisessä skenaariossa, kenttäluetteloa voi olla vaikea hahmottaa. Sinun täytyy tulkita ne konstruktorin koodista.

parempi lähestymistapa on ilmoittaa luokkakentät yksiselitteisesti., Riippumatta siitä, mitä constructor tekee, instanssissa on aina samat kentät.

luokkakenttäehdotuksen avulla voit määritellä luokan rungon sisällä olevat kentät. Plus, voit ilmoittaa alkuarvo heti:

class SomeClass { field1; field2 = 'Initial value'; // ...}

katsotaanpa muuttaa User luokan ja julistaa julkinen kenttä name:

class User { name; constructor(name) { this.name = name; }}const user = new User('Jon Snow');user.name; // => 'Jon Snow'

name; kehossa luokan vakuuttaa, julkinen kenttä name.,

julkiset kentät julisti tällainen tapa on ilmeikäs: vilkaista kentät ilmoitukset on tarpeeksi ymmärtää, että luokka on tietorakenne.

lisäksi luokkakenttä voidaan alustaa heti julistuksessa.

class User { name = 'Unknown'; constructor() { // No initialization }}const user = new User();user.name; // => 'Unknown'

name = 'Unknown' sisällä luokan kehon vakuuttaa kenttä name ja alustaa sen arvo 'Unknown'.

julkisille kentille pääsyä tai päivittämistä ei ole rajoitettu., Voit lukea ja määrittää arvoja julkisille kentille rakentajan, menetelmien ja luokan ulkopuolella.

3.2 Yksityisen esimerkiksi kentille

Kapselointi on tärkeä käsite, jonka avulla voit piilottaa sisäisiä yksityiskohtia luokan. Joku, joka käyttää kapseloitu luokka riippuu vain julkisen käyttöliittymän, että luokka tarjoaa, ja ei pari täytäntöönpanon yksityiskohtia luokan.

Luokat järjestetään kapselointi mielessä, on helpompi päivittää, kun toteutuksen yksityiskohdat muuttuvat.,

hyvä tapa piilottaa kohteen sisäinen data on käyttää yksityisiä kenttiä. Näitä kenttiä voi lukea ja muuttaa vain sen luokan sisällä, johon ne kuuluvat. Luokan ulkopuolinen maailma ei voi suoraan muuttaa yksityisiä kenttiä.

yksityisille kentille pääsee vain luokan sisällä.

Etuliite-kenttään nimi, jonka erityinen symboli # tehdä siitä yksityisen, esim. #myField., Etuliite # on säilytettävä aina, kun työskentelet kentän kanssa: ilmoita se, lue se tai muokkaa sitä.

katsotaanpa varmista, että kentässä #name voidaan asettaa kerran esimerkiksi alustus:

#name on oma kenttä. Voit käyttää ja muokata #name kehossa User. Menetelmä getName() (lisää menetelmiä. seuraava kohta) voivat käyttää yksityinen kenttä #name.,

Mutta, jos yrität käyttää yksityinen kenttä #name ulkopuolella User luokan elin, syntaksi virhe on heitetty: SyntaxError: Private field '#name' must be declared in an enclosing class.

3.3 julkiset staattiset kentät

voit myös määritellä kentät itse luokassa: staattiset kentät. Nämä ovat hyödyllisiä määritellä luokan vakiot tai tallentaa tietonsa luokan.

Voit luoda staattisia kenttiä JavaScript-luokka, käytä erityistä avainsana static seuraa kentän nimi: static myStaticField.,

lisätään uusi kenttä type, joka ilmaisee käyttäjätyypin: admin tai regular. Staattiset kentät TYPE_ADMIN ja TYPE_REGULAR vakiot ovat käteviä erottaa käyttäjä:

static TYPE_ADMIN ja static TYPE_REGULAR määritä staattinen muuttujat sisälle User luokka. Käyttää staattisia kenttiä, sinun täytyy käyttää class seuraa kentän nimi: User.TYPE_ADMIN ja User.TYPE_REGULAR.

3.,4 Private static fields

joskus staattiset kentät ovat toteutuksen yksityiskohta, jonka haluaisi piilottaa. Tässä suhteessa voit tehdä staattiset kentät yksityisiksi.

Jotta staattinen kenttä on yksityinen, etuliite-kenttään nimi, jossa # erityiset symboli: static #myPrivateStaticField.

oletetaan, että haluat rajoittaa määrä tapauksia User luokka., Piilottaa tietoja tapauksissa rajoja, voit luoda yksityisen staattiset kentät:

staattinen kenttä User.#MAX_INSTANCES asettaa enimmäismäärä sallittu tapauksissa, kun User.#instances staattinen kenttä lasketaan todellinen määrä tapauksia.

näihin yksityisiin staattisiin kenttiin pääsee vain User – luokassa. Mitään ulkoisesta maailmasta voi häiritä rajat mekanismi: se on etu, kapselointi.

4. Menetelmät

kentät pitävät tiedot., Mutta kyky muokata tietoja suoritetaan erityisiä toimintoja, jotka ovat osa luokkaa: menetelmiä.

JavaScript-luokat tukevat sekä instansseja että staattisia menetelmiä.

4.1 Instanssimenetelmät

Instanssimenetelmät voivat käyttää ja muokata instanssitietoja. Instanssimenetelmät voivat kutsua muita instanssimenetelmiä sekä mitä tahansa staattista menetelmää.,

esimerkiksi, katsotaanpa määritellä menetelmä getName(), joka palauttaa nimen User class:

luokan menetelmä, sekä rakentaja, this arvo on yhtä suuri kuin luokan ilmentymän. Käyttää this käyttää esimerkiksi tiedot: this.field, tai jopa kutsua muita menetelmiä: this.method().,

Anna lisää uusi menetelmä nameContains(str), jolla on yksi parametri, ja kehottaa toinen tapa:

nameContains(str) { ... } tapa User luokka, joka hyväksyy yhden parametrin str. Lisäksi se toteuttaa toisen menetelmän, jossa instanssi this.getName() saa käyttäjän nimen.

menetelmä voi olla myös yksityinen. Jotta menetelmä olisi yksityinen etuliite, sen nimi on #.

tehdään getName() menetelmä yksityinen:

#getName() on oma menetelmä., Metodin sisällä nameContains(str) soita oma menetelmä tällainen tapa: this.#getName().

yksityiseksi, #getName() ei voi olla kutsutaan ulkopuolella User luokan elin.

4.2 Getter-ja setter –

getter ja setteri jäljitellä säännöllisesti kentällä, mutta enemmän valvontaa, miten kenttä on käytettävissä ja muuttunut.

getter suoritetaan yrityksenä saada kentän arvo, kun taas setter yrittää asettaa arvon.,

varmista, että name omaisuutta User ei voi olla tyhjä, lopetetaan yksityinen kenttä #nameValue show getter ja setteri:

get name() {...} getter suoritetaan, kun avaat arvo-kenttään: user.name.

4.3 staattiset menetelmät

staattiset menetelmät ovat funktioita, jotka on liitetty suoraan luokkaan. Heillä on logiikkaa, joka liittyy luokkaan, eikä luokan tapaukseen.,

Voit luoda staattinen menetelmä käyttää erityistä avainsana static seuraa säännöllisesti menetelmän syntaksi: static myStaticMethod() { ... }.

Kun työskentelee staattisia menetelmiä, on 2 yksinkertaisia sääntöjä muistaa:

  1. staattinen menetelmä voi käyttää staattisia kenttiä
  2. staattinen menetelmä ei voi käyttää, esimerkiksi kentät.

esimerkiksi luodaan staattinen menetelmä, joka havaitsee, onko tietyllä nimellä varustettu käyttäjä jo otettu.,

isNameTaken() on staattinen menetelmä, joka käyttää staattista yksityinen kenttä User.#takenNames tarkistaa otettu nimiä.

5. Perintö: ulottuu

luokat JavaScript-tuki yhden perintö käyttäen extends avainsana.

expression class Child extends Parent { } Child luokka perii Parent konstruktori, kentät ja metodit.

esimerkiksi, katsotaanpa luoda uuden lapsen luokka ContentWriter, joka ulottuu vanhemman luokan User.,

ContentWriter perii User konstruktori, metodi getName() ja name. Myös ContentWriter – Luokka julistaa uuden kentän posts.

huomaa, että vanhempainluokan yksityiset jäsenet eivät ole lapsiluokan perimiä.

5.1 Vanhemman rakentaja: super() vuonna rakentaja()

Jos haluat soittaa vanhemman rakentaja lapsi luokan, sinun täytyy käyttää super() special-toiminto on käytettävissä, kun lapsi rakentaja.,

esimerkiksi, katsotaanpa tehdä ContentWriter rakentaja soittaa vanhemman rakentajan User, sekä alustaa viestit-kenttään:

super(name) sisällä lapsen luokka ContentWriter suorittaa rakentajan vanhemman luokan User.

Huomaa, että sisällä lapsen rakentaja, sinun täytyy suorittaa super() ennen this avainsana. Kutsuminen super() pitää huolen siitä, että vanhempi konstruktori alustaa instanssin.,

class Child extends Parent { constructor(value1, value2) { // Does not work! this.prop2 = value2; super(value1); }}

5.2 Vanhempi esimerkiksi: super menetelmiä

Jos haluat käyttää vanhemman menetelmä sisällä lapsen menetelmää, voit käyttää erityisiä pikanäppäintä super.

getName() lapsen luokka ContentWriter käyttää menetelmää super.getName() suoraan vanhemman luokan User.

tätä ominaisuutta kutsutaan menetelmän ohittamiseksi.

Huomaa, että voit käyttää super staattinen menetelmät liian, käyttää vanhemman staattisia menetelmiä.

6., Object type checking: instanceof

object instanceof Class is the operator that determines if object is an instance of Class.

Let’s see instanceof operator in action:

user is an instance of User class, user instanceof User evaluates to true.

The empty object {} is not an instance of User, correspondingly obj instanceof User is false.,

instanceof on monimuotoinen: operaattori havaitsee lapsen, kuten esimerkiksi vanhemman luokan.

writer on esimerkiksi lapsen luokka ContentWriter. Operaattori writer instanceof ContentWriter arvioi true.

samalla ContentWriter onko lapsen luokka User. Niin writer instanceof User arvioi true samoin.

Mitä jos haluaisit määrittää instanssin tarkan luokan?, Voit käyttää constructor omaisuutta ja vertailla suoraan luokan kanssa:

writer.constructor === ContentWriter; // => truewriter.constructor === User; // => false

7. Sarjat ja prototyypit

– täytyy sanoa, että luokan syntaksi JavaScript tekee hienoa työtä abstrahoitua prototypal perintö. Kuvatakseni class syntaksia en ole edes käyttänyt termiä prototyyppi.

mutta luokat on rakennettu prototyyppisen perinnön päälle. Jokainen luokka on funktio, ja luo instanssin, kun siihen vedotaan konstruktorina.

seuraavat kaksi koodinpätkää ovat ekvivalentteja.,

luokka-versio:

version käyttäen prototyyppi:

class syntaksi on tapa helpompi työskennellä, jos olet perehtynyt klassinen perintö mekanismi Java-tai Swift-kielellä.

joka tapauksessa, vaikka käytät class syntaksi JavaScript, suosittelen sinua on hyvä käsitys prototypal perintö.

8. Luokan ominaisuudet saatavuus

tässä viestissä esitetyt luokkaominaisuudet jakautuvat ES2015: een ja ehdotukset vaiheessa 3.,

vuoden 2019 loppuun mennessä, luokan ominaisuudet jaetaan:

  • Julkisen ja yksityisen esimerkiksi kentät ovat osa Luokan kentät ehdotuksen
  • Yksityisen esimerkiksi menetelmiä ja aksessoreita ovat osa Luokan yksityiset metodit ehdotuksen
  • Julkisen ja yksityisen staattiset kentät ja yksityinen staattinen menetelmät ovat osa Luokan staattisia ominaisuuksia ehdotuksen
  • loput on osa ES2015 standardi.

9. Johtopäätös

JavaScript-luokat alustavat instanssit konstruktoreilla, määrittelevät kentät ja menetelmät., Kenttiä ja menetelmiä voi liittää jopa itse luokkaan käyttäen static avainsanaa.

perintö saavutetaanextends avainsanalla: voit helposti luoda lapsiluokan vanhemmalta. super avainsana on käytetty vanhemman luokan lapsi luokassa.

hyödyntääkseen kapselointia, tehdäkseen kentät ja menetelmät yksityisiksi piilottaakseen luokkien sisäiset yksityiskohdat. Yksityisten kenttien ja menetelmien nimet tulee aloittaa #.,

JavaScriptin luokat muuttuvat yhä kätevämmiksi käyttää.

Mitä mieltä olet käyttäen # etuliite yksityinen ominaisuuksia?