Naučte sa vytvárať triedy v JavaScripte

V roku 2015 bola vydaná verzia ES6 programovacieho jazyka JavaScript. Toto vydanie predstavilo niekoľko zásadných inovácií jazyka a oficiálne ho zaradilo do kategórie objektovo orientovaného programovacieho jazyka okrem iných jazykov, ako je Java a C ++.

Objektovo orientované programovanie sa zameriava na objekty a operácie, ktoré je možné na nich vykonávať. Predtým, ako budete mať nejaké objekty, však musíte mať triedu.

Triedy JavaScript sú jednou z funkcií, ktoré menia hru, a ktoré sú súčasťou verzie jazyka ES6. Triedu možno opísať ako plán, ktorý sa používa na vytváranie objektov.

V tomto tutoriálnom článku sa naučíte vytvárať a manipulovať s objektmi pomocou tried JavaScript.

Štruktúra triedy JavaScript

Pri vytváraní triedy v jazyku JavaScript existuje jedna zásadná súčasť, ktorú budete vždy potrebovať - trieda kľúčové slovo. Na úspešné spustenie nie je potrebný takmer žiadny iný aspekt triedy JavaScript.

Trieda JavaScript sa spustí prirodzene, ak nie je poskytnutý konštruktor (trieda jednoducho počas vykonávania vytvorí prázdny konštruktor). Ak je však trieda JavaScript vytvorená pomocou konštruktorov a ďalších funkcií, ale nie je použité žiadne kľúčové slovo triedy, táto trieda nebude spustiteľná.

The trieda kľúčové slovo (ktoré by malo byť vždy malými písmenami) je v štruktúre tried JavaScriptu nevyhnutnosťou. Nasledujúci príklad je všeobecnou syntaxou triedy JavaScript. Syntax triedy JavaScript je uvedená nižšie:

trieda ClassName {
// telo triedy
}

Vytvorenie triedy v JavaScripte

V programovaní môže byť trieda chápaná ako zovšeobecnená entita, ktorá sa používa na vytvorenie špecializovaného objektu. Napríklad v školskom prostredí môžu byť zovšeobecnenou entitou (triedou) študenti a predmetom študentov môže byť John Brown. Predtým, ako vytvoríte objekt, však musíte poznať údaje, ktoré bude ukladať, a tu vstupuje do hry JavaScript Constructors.

Použitie konštruktorov v triedach JavaScript

Konštruktor je pre proces vytvárania triedy životne dôležitý z niekoľkých dôvodov; inicializuje stav objektu (prostredníctvom jeho atribútov) a volá sa automaticky, keď sa vytvorí inštancia (definuje a vytvorí) nový objekt.

Použitie príkladu konštruktéra

Nasleduje príklad konštruktéra s vysvetlením, čo to znamená.

triedny študent {
konštruktor (krstné meno, priezvisko, dátum začiatku) {
this.firstName = firstName;
this.lastName = priezvisko;
this.startDate = startDate;
}
}

Vyššie uvedený kód predstavuje dôležitý aspekt konštruktora triedy JavaScript; na rozdiel od iných jazykov, ako je Java a C ++, konštruktér JavaScriptu nepoužíva na vytvorenie konštruktéra názov triedy. Využíva konštruktér kľúčové slovo, ako vidíte na vyššie uvedenom príklade.

Súvisiace: Naučte sa vytvárať triedy v Jave

The konštruktér vo vyššie uvedenom príklade má tri parametre a používa príponu toto kľúčové slovo na priradenie parametrov aktuálnej inštancii triedy. Mohlo by sa to zdať trochu mätúce, ale musíte pochopiť, že triedu je možné vnímať ako plán, ktorý sa používa na výstavbu mnohých domov.

Každý postavený dom možno potom považovať za predmet tejto triedy. Napriek tomu, že každý z týchto domov je vytvorený podľa rovnakého plánu, je ich možné rozlíšiť podľa ich konkrétnej geografickej polohy alebo od ľudí, ktorí ich vlastnia.

The toto kľúčové slovo sa používa na rozlíšenie každého objektu vytvoreného triedou. Zaisťuje, že pre každý objekt, ktorý je vytvorený pomocou rovnakej triedy, sú uložené a spracované správne údaje.

Vytvorenie objektu v JavaScripte

Konštruktory sú v jazyku, akým je JavaScript, dôležité, pretože znamenajú počet atribútov, ktoré by objekt konkrétnej triedy mal mať. Niektoré jazyky budú vyžadovať, aby bol atribút (premenná) deklarovaný predtým, ako ho možno použiť v konštruktore alebo v iných metódach. To však nie je prípad JavaScript.

Súvisiace: Ako deklarovať premenné v JavaScripte

Pri pohľade na vyššie uvedený konštruktér študentskej triedy môžete zistiť, že objekt tejto triedy bude mať tri atribúty.

Vytvorenie príkladu objektu

Nasleduje príklad vytvorenia objektu v jazyku JavaScript.

// vytvorenie nového objektu
const john = nový študent ('John', 'Brown', '2018');

Vyššie uvedený kód používa príponu Študent triedy na vytvorenie objektu.

Pri vytváraní objektu triedy musíte použiť Nový kľúčové slovo, za ktorým nasleduje názov triedy a hodnoty, ktoré chcete priradiť k príslušným atribútom. Teraz máte nového študenta s krstným menom John, priezviskom Brown a dátumom začiatku roku 2018. Máte tiež konštantnú premennú: john. Táto premenná je dôležitá, pretože vám umožňuje používať objekt, ktorý je vytvorený.

Bez john premennú budete stále môcť vytvoriť nový objekt pomocou súboru Študent triedy, ale potom nebude možné k tomuto objektu pristupovať a používať ho rôznymi metódami triedy.

Použitie metód v triedach JavaScript

Metóda je funkciou triedy, ktorá sa používa na vykonávanie operácií s objektmi, ktoré sú z triedy vytvorené. Dobrou metódou na zaradenie do študentskej triedy je metóda, ktorá generuje správu o každom študentovi.

Príklad vytvárania metód triedy

Nasleduje príklad na vytváranie triednych metód v JavaScripte.

triedny študent {
konštruktor (krstné meno, priezvisko, dátum začiatku) {
this.firstName = firstName;
this.lastName = priezvisko;
this.startDate = startDate;
}
// metóda hlásenia
správa(){
návrat `$ {this.firstName} $ {this.lastName} začal navštevovať túto inštitúciu v $ {this.startDate}`
}
}

Vyššie uvedená trieda obsahuje metódu, ktorá vygeneruje správu o každom študentovi vytvorenú pomocou súboru Študent trieda. Ak chcete použiť správa() Na jednoduché volanie funkcie budete musieť použiť existujúcu vec v triede.

Vďaka vyššie uvedenému „príkladu vytvorenia objektu“ by ste mali mať objekt súboru Študent trieda, ktorá je priradená k premennej john. Použitím john, teraz môžete úspešne volať na číslo správa() metóda.

Príklad použitia triednych metód

Nasleduje príklad použitia metód triedy v JavaScripte.

// vytvorenie nového objektu
const john = nový študent ('John', 'Brown', '2018');
// volanie metódy report a uloženie jej výsledku do premennej
nech výsledok = john.report ();
// vytlačenie výsledku do konzoly
console.log (výsledok);

Vyššie uvedený kód používa príponu Študenti triedy na produkciu nasledujúceho výstupu v konzole:

John Brown začal navštevovať túto inštitúciu v roku 2018

Použitie statických metód v triedach JavaScript

Statické metódy sú jedinečné, pretože sú jedinými metódami v triede JavaScript, ktoré je možné použiť bez objektu.

Z vyššie uvedeného príkladu nemôžete použiť správa() metóda bez predmetu triedy. Dôvodom je, že správa() metóda na dosiahnutie požadovaného výsledku závisí od atribútov objektu. Na použitie statickej metódy však budete potrebovať iba názov triedy, v ktorej je metóda uložená.

Vytvorenie príkladu statickej metódy

Nasleduje príklad statickej metódy pre JavaScript.

triedny študent {
konštruktor (krstné meno, priezvisko, dátum začiatku) {
this.firstName = firstName;
this.lastName = priezvisko;
this.startDate = startDate;
}
// metóda hlásenia
správa(){
návrat `$ {this.firstName} $ {this.lastName} začal navštevovať túto inštitúciu v $ {this.startDate}`
}
// statická metóda
static endDate (startDate) {
návrat startDate + 4;
}
}

Dôležitou vecou z vyššie uvedeného príkladu je, že každá statická metóda začína príponou statické kľúčové slovo.

Použitie príkladu statickej metódy

Nasleduje príklad použitia statickej metódy v jazyku JavaScript.

// volanie statickej metódy a vytlačenie jej výsledku do konzoly
console.log (Student.endDate (2018));

Riadok kódu vyššie používa príponu Študenti triedy na produkciu nasledujúceho výstupu v konzole:

2022

Vytvorenie triedy JavaScript je jednoduché

Ak chcete vytvoriť triedu JavaScript a vytvoriť z nej inštanciu jedného alebo viacerých objektov, je potrebné si zapamätať niekoľko vecí:

• Trieda JavaScript musí mať trieda kľúčové slovo.
• Konštruktor JavaScript udáva počet hodnôt, ktoré môže objekt mať.
• Metódy všeobecnej triedy nie je možné použiť bez objektu.
• Statické metódy je možné použiť bez predmetu.

The konzola.log () metóda sa používa v tomto článku na poskytnutie výsledkov použitia všeobecných aj statických metód v triede JavaScript. Táto metóda je užitočným nástrojom pre každého vývojára JavaScriptu, pretože pomáha pri procese ladenia.

Zoznámenie sa s console.log () metóda je jednou z najdôležitejších vecí, ktoré môžete ako vývojár JavaScriptu urobiť.

The Ultimate JavaScript Cheat Sheet

Získajte rýchle obnovenie prvkov JavaScript pomocou tohto cheat listu.

Čítajte ďalej

O autorovi