Opi luomaan luokat JavaScriptillä

Vuonna 2015 julkaistiin JavaScript -ohjelmointikielen ES6 -versio. Tämä julkaisu esitteli joitain merkittäviä päivityksiä kielelle ja asetti sen virallisesti olio-ohjelmointikielen luokkaan muiden kielten joukossa, kuten Java ja C ++.

Kohdekeskeinen ohjelmointi keskittyy objekteihin ja niihin suoritettaviin toimintoihin. Kuitenkin, ennen kuin sinulla voi olla esineitä, sinulla on oltava luokka.

JavaScript-luokat ovat yksi kielen ES6-version mukana tulleista pelejä muuttavista ominaisuuksista. Luokka voidaan kuvata suunnitelmaksi, jota käytetään objektien luomiseen.

Tässä opetusartikkelissa opit luomaan ja käsittelemään objekteja JavaScript -luokkien avulla.

JavaScript -luokan rakenne

Luodessasi luokkaa JavaScriptissä on yksi peruskomponentti, jota tarvitset aina - luokka avainsana. Lähes kaikkia muita JavaScript -luokan osia ei vaadita sen onnistuneelle suorittamiselle.

JavaScript -luokka suoritetaan luonnollisesti, jos konstruktoria ei ole annettu (luokka luo yksinkertaisesti tyhjän konstruktorin suorituksen aikana). Jos JavaScript -luokka luodaan konstruktorien ja muiden toimintojen kanssa, mutta luokka -avainsanaa ei käytetä, tämä luokka ei ole suoritettavissa.

The luokka avainsana (jonka pitäisi aina olla pienillä kirjaimilla) on välttämätön JavaScript -luokan rakenteessa. Seuraava esimerkki on JavaScript -luokan yleinen syntaksi. JavaScript -luokan syntaksi on alla:

luokka ClassName {
// luokan runko
}

Luokan luominen JavaScriptissä

Ohjelmoinnissa luokka voidaan nähdä yleistettynä kokonaisuutena, jota käytetään erikoisobjektin luomiseen. Esimerkiksi kouluympäristössä yleistetty kokonaisuus (luokka) voi olla oppilaita ja opiskelijoiden kohde voi olla John Brown. Mutta ennen kuin luot objektin, sinun on tiedettävä sen tallentamat tiedot, ja tässä JavaScript -rakentajat tulevat pelaamaan.

Konstruktorien käyttäminen JavaScript -luokissa

Rakentaja on elintärkeä luokan luomisprosessissa muutamasta syystä; se alustaa objektin tilan (ominaisuuksiensa kautta) ja sitä kutsutaan automaattisesti, kun uusi objekti luodaan (määritetään ja luodaan).

Käyttämällä konstruktoriesimerkkiä

Alla näet esimerkin konstruktorista, jossa on selitys sen merkityksestä.

luokan oppilas {
konstruktori (etunimi, sukunimi, aloituspäivä) {
tämä.fi -etunimi = etunimi;
tämä.sukunimi = sukunimi;
this.startDate = startDate;
}
}

Yllä oleva koodi on tärkeä osa JavaScript -luokan rakentajaa; toisin kuin muut kielet, kuten Java ja C ++, JavaScript -rakentaja ei käytä luokan nimeä rakentajana. Se käyttää rakentaja avainsana, kuten yllä olevassa esimerkissä näkyy.

Aiheeseen liittyviä: Opi luomaan luokkia Javassa

The rakentaja yllä olevassa esimerkissä otetaan kolme parametria ja käytetään Tämä avainsana, jolla parametrit määritetään luokan nykyiselle esiintymälle. Se saattaa tuntua hieman sekavalta, mutta sinun on ymmärrettävä, että luokka voidaan nähdä suunnitelmana, jota käytetään monien talojen luomiseen.

Jokainen rakennettu talo voidaan sitten nähdä tämän luokan kohteena. Vaikka jokainen näistä taloista on luotu samalla kaavalla, ne erottuvat maantieteellisestä sijainnistaan ​​tai omistajistaan.

The Tämä avainsanaa käytetään erottamaan jokainen luokan luoma objekti. Se varmistaa, että oikeat tiedot tallennetaan ja käsitellään jokaiselle objektille, joka on luotu käyttämällä samaa luokkaa.

Objektin luominen JavaScriptissä

Rakenteet ovat tärkeitä JavaScriptin kaltaisella kielellä, koska ne merkitsevät määritteiden lukumäärää tietyn luokan objektilla. Jotkut kielet vaativat määritteen (muuttujan) ilmoittamisen, ennen kuin sitä voidaan käyttää konstruktorissa tai muissa menetelmissä. Näin ei kuitenkaan ole JavaScriptin kohdalla.

Aiheeseen liittyviä: Muuttujien ilmoittaminen JavaScriptissä

Tarkasteltaessa yllä olevaa oppilasluokan konstruktoria voit huomata, että tämän luokan objektilla on kolme ominaisuutta.

Esimerkki objektista

Alla näet esimerkin objektin luomisesta JavaScriptissä.

// luoda uusi objekti
const john = uusi opiskelija ('John', 'Brown', '2018');

Yllä oleva koodi käyttää Opiskelija luokka luo objektin.

Kun luot luokan objektia, sinun on käytettävä Uusi avainsana, jota seuraa luokan nimi ja arvot, jotka haluat määrittää vastaaville määritteille. Nyt sinulla on uusi oppilas etunimellä John, sukunimi Brown ja alkamispäivä 2018. Sinulla on myös vakio muuttuja: john. Tämä muuttuja on tärkeä, koska sen avulla voit käyttää luotua objektia.

Ilman john muuttuja, voit silti luoda uuden objektin käyttämällä Opiskelija luokka, mutta silloin ei ole mitään tapaa käyttää tätä objektia ja käyttää sitä luokan eri menetelmien kanssa.

Menetelmien käyttö JavaScript -luokissa

Menetelmä on luokan funktio, jota käytetään suorittamaan toimintoja luokasta luoduista objekteista. Hyvä tapa lisätä oppilasluokka on menetelmä, joka luo raportin jokaisesta oppilasta.

Esimerkki luokkamenetelmien luomisesta

Alla on esimerkki luokkamenetelmien luomisesta JavaScriptissä.

luokan oppilas {
konstruktori (etunimi, sukunimi, aloituspäivä) {
tämä.fi -etunimi = etunimi;
tämä.sukunimi = sukunimi;
this.startDate = startDate;
}
// raportointimenetelmä
raportti () {
return `$ {this.firstName} $ {this.lastName} alkoi käydä tässä laitoksessa $ {this.startDate}
}
}

Yllä oleva luokka sisältää menetelmän, joka luo raportin jokaisesta oppilasta, joka on luotu Opiskelija luokka. Jos haluat käyttää raportti () Menetelmässä sinun on käytettävä luokan olemassa olevaa objektia yksinkertaisen funktion kutsuun.

Yllä olevan "luo objektiesimerkki" ansiosta sinulla pitäisi olla objekti Opiskelija muuttujaan määritetty luokka john. Käyttämällä john, voit nyt soittaa raportti () menetelmä.

Esimerkki luokkamenetelmien käyttämisestä

Alla on esimerkki luokkamenetelmien käytöstä JavaScriptissä.

// luoda uusi objekti
const john = uusi opiskelija ('John', 'Brown', '2018');
// raportointimenetelmän kutsuminen ja sen tuloksen tallentaminen muuttujaan
anna tuloksen = john.report ();
// tulostetaan tulos konsoliin
console.log (tulos);

Yllä oleva koodi käyttää Opiskelijat luokka tuottaa seuraavan tuloksen konsolissa:

John Brown aloitti käymisen tässä laitoksessa vuonna 2018

Staattisten menetelmien käyttö JavaScript -luokissa

Staattiset menetelmät ovat ainutlaatuisia, koska ne ovat ainoat JavaScript -luokan menetelmät, joita voidaan käyttää ilman objektia.

Yllä olevasta esimerkistä et voi käyttää raportti () menetelmä ilman luokan objektia. Tämä johtuu siitä, että raportti () menetelmä perustuu kohteen ominaisuuksiin halutun tuloksen aikaansaamiseksi. Jos haluat kuitenkin käyttää staattista menetelmää, tarvitset vain menetelmän tallentavan luokan nimen.

Esimerkki staattisesta menetelmästä

Alla on esimerkki staattisesta menetelmästä JavaScriptille.

luokan oppilas {
konstruktori (etunimi, sukunimi, aloituspäivä) {
tämä.fi -etunimi = etunimi;
tämä.sukunimi = sukunimi;
this.startDate = startDate;
}
// raportointimenetelmä
raportti () {
return `$ {this.firstName} $ {this.lastName} alkoi käydä tässä laitoksessa $ {this.startDate}
}
// staattinen menetelmä
staattinen endDate (startDate) {
paluu startDate + 4;
}
}

Tärkeä huomata yllä olevasta esimerkistä on, että jokainen staattinen menetelmä alkaa staattinen avainsana.

Esimerkki staattisesta menetelmästä

Alla on esimerkki staattisen menetelmän käyttämisestä JavaScriptissä.

// staattisen menetelmän kutsuminen ja tulosten tulostaminen konsoliin
console.log (Student.endDate (2018));

Yllä oleva koodirivi käyttää Opiskelijat luokka tuottaa seuraavan tuloksen konsolissa:

2022

JavaScript -luokan luominen on helppoa

Sinun on muistettava useita asioita, jos haluat luoda JavaScript -luokan ja luoda siitä yhden tai useamman objektin:

• JavaScript -luokassa on oltava luokka avainsana.
• JavaScript -konstruktori osoittaa objektin arvojen määrän.
• Yleisiä luokkamenetelmiä ei voida käyttää ilman objektia.
• Staattisia menetelmiä voidaan käyttää ilman objektia.

The konsoli.Hirsi() -menetelmää käytetään tässä artikkelissa antamaan tuloksia sekä yleisten että staattisten menetelmien käytöstä JavaScript -luokassa. Tämä menetelmä on hyödyllinen työkalu kaikille JavaScript -kehittäjille, koska se auttaa virheenkorjausprosessissa.

Tutustuminen console.log () menetelmä on yksi tärkeimmistä asioista, joita voit tehdä JavaScript -kehittäjänä.

Lopullinen JavaScript -huijausarkki

Hanki nopea päivitys JavaScript -elementeille tällä huijausarkilla.

Lue seuraava

Kirjailijasta