Naučte se vytvářet třídy v JavaScriptu

V roce 2015 byla vydána verze ES6 programovacího jazyka JavaScript. Tato verze představila několik zásadních upgradů jazyka a oficiálně ji zařadila do kategorie objektově orientovaného programovacího jazyka mezi jiné jazyky, jako je Java a C ++.

Objektově orientované programování se zaměřuje na objekty a operace, které je možné na nich provádět. Než však budete moci mít nějaké objekty, budete potřebovat třídu.

Třídy JavaScriptu jsou jednou z funkcí, které mění hru, a které jsou součástí verze jazyka ES6. Třídu lze popsat jako plán, který se používá k vytváření objektů.

V tomto článku se dozvíte, jak vytvářet a manipulovat s objekty pomocí tříd JavaScript.

Struktura třídy JavaScript

Při vytváření třídy v JavaScriptu existuje jedna základní součást, kterou budete vždy vyžadovat - třída klíčové slovo. K úspěšnému provedení není vyžadován téměř žádný jiný aspekt třídy JavaScript.

Třída JavaScript se spustí přirozeně, pokud není poskytnut konstruktor (třída během provádění jednoduše vytvoří prázdný konstruktor). Pokud je však třída JavaScript vytvořena pomocí konstruktorů a dalších funkcí, ale není použito žádné klíčové slovo třídy, nebude tato třída spustitelná.

The třída klíčové slovo (které by mělo být vždy malé) je ve struktuře tříd JavaScriptu nutností. Následující příklad je obecnou syntaxí třídy JavaScript. Syntaxe třídy JavaScript je níže:

třída ClassName {
// tělo třídy
}

Vytvoření třídy v JavaScriptu

V programování lze na třídu pohlížet jako na zobecněnou entitu, která se používá k vytvoření specializovaného objektu. Například ve školním prostředí mohou být zobecněnou entitou (třídou) studenti a objektem studentů John Brown. Než ale vytvoříte objekt, budete potřebovat znát data, která bude ukládat, a zde vstupuje do hry JavaScript Constructors.

Použití konstruktorů ve třídách JavaScriptu

Konstruktor je pro proces vytváření třídy životně důležitý z několika důvodů; inicializuje stav objektu (prostřednictvím jeho atributů) a je volán automaticky při vytvoření (definování a vytvoření) nového objektu.

Použití příkladu konstruktoru

Níže uvidíte příklad konstruktoru s vysvětlením, co to znamená.

třída Student {
konstruktor (firstName, lastName, startDate) {
this.firstName = firstName;
this.lastName = příjmení;
this.startDate = startDate;
}
}

Výše uvedený kód představuje důležitý aspekt konstruktoru třídy JavaScript; na rozdíl od jiných jazyků, jako je Java a C ++, konstruktér JavaScriptu nepoužívá k vytvoření konstruktoru název třídy. Používá konstruktér klíčové slovo, jak vidíte na výše uvedeném příkladu.

Příbuzný: Naučte se vytvářet třídy v Javě

The konstruktér ve výše uvedeném příkladu má tři parametry a používá tento klíčové slovo pro přiřazení parametrů aktuální instanci třídy. Může se to zdát trochu matoucí, ale musíte pochopit, že třídu lze vnímat jako plán, který se používá k vytvoření mnoha domů.

Každý postavený dům lze pak považovat za objekt této třídy. Ačkoli každý z těchto domů je vytvořen se stejným plánem, odlišují se podle své specifické geografické polohy nebo lidí, kteří je vlastní.

The tento Klíčové slovo se používá k rozlišení každého objektu vytvořeného třídou. Zajišťuje, že pro každý objekt, který je vytvořen pomocí stejné třídy, jsou uložena a zpracována správná data.

Vytvoření objektu v JavaScriptu

Konstruktory jsou důležité v jazyce, jako je JavaScript, protože znamenají počet atributů, které by měl mít objekt konkrétní třídy. Některé jazyky budou vyžadovat deklaraci atributu (proměnné), než bude možné jej použít v konstruktoru nebo v jiných metodách. To však není případ JavaScriptu.

Příbuzný: Jak deklarovat proměnné v JavaScriptu

Při pohledu na konstruktor studentské třídy výše můžete rozeznat, že objekt této třídy bude mít tři atributy.

Vytvoření příkladu objektu

Níže uvidíte příklad pro vytvoření objektu v JavaScriptu.

// vytvoření nového objektu
const john = nový student ('John', 'Brown', '2018');

Výše uvedený kód používá Student třídy k vytvoření objektu.

Při vytváření objektu třídy musíte použít Nový klíčové slovo, za ním název třídy a hodnoty, které chcete příslušným atributům přiřadit. Nyní máte nového studenta s křestním jménem John, příjmením Brown a datem zahájení roku 2018. Máte také konstantní proměnnou: John. Tato proměnná je důležitá, protože vám umožňuje používat objekt, který je vytvořen.

Bez John proměnnou budete stále moci vytvořit nový objekt pomocí Student třídy, ale pak nebude existovat žádný způsob přístupu k tomuto objektu a jeho použití s ​​různými metodami třídy.

Používání metod ve třídách JavaScriptu

Metoda je funkcí třídy, která se používá k provádění operací s objekty, které jsou ze třídy vytvořeny. Dobrou metodou přidání do studentské třídy je metoda, která generuje zprávu o každém studentovi.

Příklad vytváření metod třídy

Níže je uveden příklad pro vytváření třídních metod v JavaScriptu.

třída Student {
konstruktor (firstName, lastName, startDate) {
this.firstName = firstName;
this.lastName = příjmení;
this.startDate = startDate;
}
// metoda hlášení
zpráva(){
return `$ {this.firstName} $ {this.lastName} začal navštěvovat tuto instituci v $ {this.startDate}
}
}

Výše uvedená třída obsahuje metodu, která vygeneruje zprávu o každém studentovi vytvořeném pomocí Student třída. Chcete -li použít zpráva() metodu, budete muset použít existující objekt třídy k provedení jednoduchého volání funkce.

Díky výše uvedenému příkladu „vytvořit objekt“ byste měli mít objekt Student třída, která je proměnné přiřazena John. Použitím John, nyní můžete úspěšně volat zpráva() metoda.

Příklad použití třídních metod

Níže je uveden příklad použití třídních metod v JavaScriptu.

// vytvoření nového objektu
const john = nový student ('John', 'Brown', '2018');
// volání metody report a uložení jejího výsledku do proměnné
ať výsledek = john.report ();
// tisk výsledku do konzoly
console.log (výsledek);

Výše uvedený kód používá Studenti třídy k vytvoření následujícího výstupu v konzole:

John Brown začal navštěvovat tuto instituci v roce 2018

Použití statických metod ve třídách JavaScriptu

Statické metody jsou jedinečné, protože jsou jedinými metodami ve třídě JavaScript, které lze použít bez objektu.

Z výše uvedeného příkladu nemůžete použít zpráva() metoda bez objektu třídy. Je to proto, že zpráva() metoda spoléhá na atributy objektu k dosažení požadovaného výsledku. K použití statické metody však budete potřebovat pouze název třídy, která metodu ukládá.

Vytvoření příkladu statické metody

Níže je příklad statické metody pro JavaScript.

třída Student {
konstruktor (firstName, lastName, startDate) {
this.firstName = firstName;
this.lastName = příjmení;
this.startDate = startDate;
}
// metoda hlášení
zpráva(){
return `$ {this.firstName} $ {this.lastName} začal navštěvovat tuto instituci v $ {this.startDate}
}
// statická metoda
static endDate (startDate) {
návrat startDate + 4;
}
}

Důležitá věc, kterou je třeba si z výše uvedeného příkladu všimnout, je, že každá statická metoda začíná znakem statický klíčové slovo.

Použití příkladu statické metody

Níže je uveden příklad použití statické metody v jazyce JavaScript.

// volání statické metody a tisk jejího výsledku do konzoly
console.log (Student.endDate (2018));

Řádek kódu výše používá Studenti třídy k vytvoření následujícího výstupu v konzole:

2022

Vytvoření třídy JavaScript je snadné

Pokud chcete vytvořit třídu JavaScript a vytvořit z ní instanci jednoho nebo více objektů, je třeba si pamatovat několik věcí:

• Třída JavaScript musí mít třída klíčové slovo.
• Konstruktor JavaScriptu udává počet hodnot, které objekt může mít.
• Obecné metody třídy nelze použít bez objektu.
• Statické metody lze použít bez objektu.

The řídicí panel.log () metoda je v celém tomto článku použita k poskytnutí výsledků používání obecných i statických metod ve třídě JavaScript. Tato metoda je užitečným nástrojem pro každého vývojáře JavaScriptu, protože pomáhá v procesu ladění.

Seznámení se s console.log () metoda je jednou z nejdůležitějších věcí, které můžete jako vývojář JavaScriptu udělat.

The Ultimate JavaScript Cheat Sheet

Získejte rychlé obnovení prvků JavaScript pomocí tohoto cheat listu.

Číst dále

O autorovi