Saznajte kako stvoriti klase u JavaScript -u

2015. godine objavljena je ES6 verzija programskog jezika JavaScript. Ovo izdanje uvelo je neke velike nadogradnje jezika i službeno ga svrstalo u kategoriju objektno orijentiranog programskog jezika među ostalim jezicima, poput Jave i C ++.

Objektno orijentirano programiranje usredotočuje se na objekte i operacije koje se na njima mogu izvesti. Međutim, da biste mogli imati objekte, morat ćete imati klasu.

JavaScript klase jedna su od značajki koje mijenjaju igre, a koja je došla s ES6 verzijom jezika. Klasa se može opisati kao nacrt koji se koristi za stvaranje objekata.

U ovom vodiču naučit ćete kako stvarati i upravljati objektima pomoću klasa JavaScript.

Struktura klase JavaScript

Prilikom stvaranja klase u JavaScriptu postoji jedna temeljna komponenta koja će vam uvijek biti potrebna - razred ključna riječ. Gotovo svaki drugi aspekt klase JavaScript nije potreban za uspješno izvršavanje.

JavaScript klasa izvršit će se prirodno ako nije naveden konstruktor (klasa će jednostavno stvoriti prazan konstruktor tijekom izvođenja). Međutim, ako je stvorena JavaScript klasa s konstruktorima i drugim funkcijama, ali se ne koristi ključna riječ klase, ova klasa neće biti izvršna.

The razred ključna riječ (koja bi uvijek trebala biti mala) nužna je u strukturi klase JavaScript. Sljedeći primjer je opća sintaksa klase JavaScript. Sintaksa klase JavaScript je ispod:

klasa ClassName {
// tijelo klase
}

Stvaranje klase u JavaScript -u

U programiranju se klasa može promatrati kao generalizirani entitet koji se koristi za stvaranje specijaliziranog objekta. Na primjer, u školskom okruženju generalizirani entitet (razred) mogu biti učenici, a objekt učenika može biti John Brown. No, prije nego što kreirate objekt, morate znati podatke koje će pohraniti, a tu dolaze u obzir JavaScript konstruktori.

Korištenje konstruktora u JavaScript klasama

Konstruktor je od vitalnog značaja za proces stvaranja klase iz nekoliko razloga; inicijalizira stanje objekta (kroz njegove atribute) i automatski se poziva kada se novi objekt instancira (definira i kreira).

Primjer konstruktora

U nastavku ćete vidjeti primjer konstruktora s objašnjenjem što to znači.

razred učenik {
konstruktor (firstName, lastName, startDate) {
ovo.prvo ime = prvo ime;
this.lastName = prezime;
this.startDate = datum početka;
}
}

Gornji kôd predstavlja važan aspekt konstruktora klase JavaScript; za razliku od drugih jezika, poput Jave i C ++, JavaScript konstruktor ne koristi naziv klase za stvaranje konstruktora. Koristi se konstruktor ključne riječi kao što možete vidjeti u gornjem primjeru.

Povezano: Saznajte kako stvoriti klase u Javi

The konstruktor u gornjem primjeru uzima tri parametra i koristi ovaj ključna riječ za dodjeljivanje parametara trenutnoj instanci klase. Moglo bi se činiti pomalo zbunjujućim, ali ono što morate razumjeti je da se klasa može promatrati kao nacrt koji se koristi za stvaranje mnogih kuća.

Svaka izgrađena kuća tada se može promatrati kao objekt ove klase. Iako je svaka od ovih kuća napravljena s istim planom, razlikuju se po svom geografskom položaju ili ljudima koji ih posjeduju.

The ovaj ključna riječ se koristi za razlikovanje svakog objekta stvorenog klasom. Osigurava da se ispravni podaci pohranjuju i obrađuju za svaki objekt koji je kreiran pomoću iste klase.

Stvaranje objekta u JavaScript -u

Konstruktori su važni u jeziku poput JavaScripta jer označavaju broj atributa koje objekt određene klase treba imati. Neki će jezici zahtijevati da se atribut (varijabla) objavi prije nego što se može koristiti u konstruktoru ili bilo kojoj drugoj metodi. Međutim, to nije slučaj s JavaScriptom.

Povezano: Kako deklarirati varijable u JavaScript -u

Gledajući gornji konstruktor studentske klase, možete zaključiti da će objekt ove klase imati tri atributa.

Primjer stvaranja objekta

U nastavku ćete vidjeti primjer stvaranja objekta u JavaScriptu.

// stvoriti novi objekt
const john = novi student ('John', 'Brown', '2018');

Gornji kôd koristi Student klase za stvaranje objekta.

Prilikom stvaranja objekta klase morate koristiti novi ključna riječ, nakon čega slijedi naziv klase i vrijednosti koje želite dodijeliti odgovarajućim atributima. Sada imate novog učenika s imenom John, prezimenom Brown i datumom početka 2018. godine. Također imate konstantnu varijablu: Ivan. Ova je varijabla važna jer vam omogućuje korištenje objekta koji je kreiran.

Bez toga Ivan varijabli i dalje ćete moći stvoriti novi objekt pomoću Student class, ali tada neće biti načina za pristup ovom objektu i njegovu upotrebu s različitim metodama klase.

Korištenje metoda u JavaScript klasama

Metoda je funkcija klase koja se koristi za izvođenje operacija nad objektima koji su stvoreni iz klase. Dobra metoda za dodavanje učeničkom razredu je ona koja generira izvješće o svakom učeniku.

Primjer stvaranja metoda klase

Ispod je primjer stvaranja metoda klase u JavaScriptu.

razred učenik {
konstruktor (firstName, lastName, startDate) {
ovo.prvo ime = prvo ime;
this.lastName = prezime;
this.startDate = datum početka;
}
// metoda izvješća
izvješće(){
return `$ {this.firstName} $ {this.lastName} je počeo pohađati ovu ustanovu u $ {this.startDate}`
}
}

Gornji razred sadrži metodu koja će generirati izvješće o svakom učeniku stvorenom pomoću Student razred. Za korištenje izvješće() metodu morat ćete koristiti postojeći objekt klase za jednostavan poziv funkcije.

Zahvaljujući gore navedenom “create a object example” trebali biste imati objekt Student klase koja je dodijeljena varijabli Ivan. Korištenje Ivan, sada možete uspješno nazvati izvješće() metoda.

Primjer primjene metoda klase

Ispod je primjer korištenja metoda klase u JavaScriptu.

// stvoriti novi objekt
const john = novi student ('John', 'Brown', '2018');
// pozivanje metode izvješća i spremanje njezina rezultata u varijablu
neka rezultat = john.report ();
// ispis rezultata na konzolu
console.log (rezultat);

Gornji kôd koristi Studenti klase za izradu sljedećeg izlaza u konzoli:

John Brown počeo je pohađati ovu ustanovu 2018. godine

Korištenje statičkih metoda u JavaScript klasama

Statičke metode su jedinstvene jer su jedine metode u klasi JavaScript koje se mogu koristiti bez objekta.

Iz gornjeg primjera ne možete koristiti izvješće() metoda bez objekta klase. To je zato što je izvješće() metoda se oslanja na atribute objekta kako bi proizvela željeni rezultat. No, za upotrebu statičke metode trebat će vam samo naziv klase koja sprema metodu.

Primjer stvaranja statičke metode

Ispod je primjer statičke metode za JavaScript.

razred učenik {
konstruktor (firstName, lastName, startDate) {
ovo.prvo ime = prvo ime;
this.lastName = prezime;
this.startDate = datum početka;
}
// metoda izvješća
izvješće(){
return `$ {this.firstName} $ {this.lastName} je počeo pohađati ovu ustanovu u $ {this.startDate}`
}
// statička metoda
static endDate (startDate) {
return startDate + 4;
}
}

Važno je napomenuti iz gornjeg primjera da svaka statička metoda počinje s statički ključna riječ.

Primjer statičke metode

Ispod je primjer korištenja statičke metode u JavaScriptu.

// pozivanje statičke metode i ispis njezinog rezultata na konzolu
console.log (Student.endDate (2018));

Gornji red koda koristi Studenti klase za izradu sljedećeg izlaza u konzoli:

2022

Izrada JavaScript klase je jednostavna

Nekoliko stvari morate zapamtiti ako želite stvoriti JavaScript klasu i iz nje stvoriti jedan ili više objekata:

• JavaScript klasa mora imati razred ključna riječ.
• JavaScript konstruktor označava broj vrijednosti koje objekt može imati.
• Metode opće klase ne mogu se koristiti bez objekta.
• Statičke metode mogu se koristiti bez objekta.

The konzola.zapisnik () metoda koristi se u ovom članku za pružanje rezultata korištenja općenitih i statičkih metoda u klasi JavaScript. Ova je metoda koristan alat za bilo kojeg JavaScript programera jer pomaže u procesu otklanjanja pogrešaka.

Upoznavanje sa console.log () metoda jedna je od najvažnijih stvari koje možete učiniti kao JavaScript programer.

Ultimate JavaScript Cheat Sheet

Brzo osvježite JavaScript elemente pomoću ove podloge.

Pročitajte Dalje

O autoru