JavaScript je multiparadigmatický jazyk, který vám umožňuje psát programy, které se řídí funkčními, objektově orientovanými a imperativními styly programování.
Pro podporu objektově orientovaných vzorů má JavaScript třídy. Protože jejich pochopení je klíčové, je tento článek průvodcem, co jsou třídy JavaScriptu a jak je používat.
Table of Contents
Co jsou třídy v JavaScriptu?
V objektově orientovaném programování modelujeme systémy jako skupiny objektů, které se vzájemně ovlivňují. Aby objekty fungovaly, ukládají data do vlastností a provádějí akce definované jako jejich metody. Třída definuje, jaké vlastnosti a metody nesou objekty stejného typu. Třídy jsou proto plány pro objekty.
Terminologie používané ve třídách
Abychom se ujistili, že jsme na stejné stránce, zde je popis tříd s klíčovými pojmy, které budeme v tomto článku používat. Pokud jste již obeznámeni s objektově orientovaným programováním, můžete přeskočit k další části.
❇️ Třída je plán pro objekt. Poskytuje šablonu, ze které lze vytvářet objekty tohoto typu. Vytvoření objektu ze šablony poskytnuté třídou se nazývá konkretizace.
❇️ Člen třídy je cokoli, co patří do třídy. Existují dva druhy členů třídy – metody a vlastnosti.
❇️ Vlastnost je člen třídy, jehož primárním účelem je ukládat hodnoty. Mohou to být jednoduché hodnoty, jako jsou čísla a řetězce. Mohou to být také složité objekty a pole.
❇️ Některé vlastnosti jsou přístupné pouze uvnitř třídy a jsou výstižně pojmenovány jako soukromé vlastnosti. Některé jsou přístupné v rámci třídy i mimo ni. Takové vlastnosti se nazývají veřejné nemovitosti.
❇️Metoda je funkce definovaná uvnitř třídy. Proto patří do třídy a má přístup k veřejným a soukromým vlastnostem. Stejně jako vlastnosti máme také veřejné metody a soukromé metody.
❇️ Existují některé metody, které poskytují rozhraní pro kód mimo třídu pro interakci s vlastnostmi uvnitř třídy. Existují dvě skupiny metod, které to dělají: getters a setters. Gettery získávají hodnoty vlastností třídy, zatímco settery nastavují hodnoty vlastností třídy.
❇️ Někteří členové jsou statičtí. To znamená, že jsou přístupné pouze ve třídě a nelze k nim přistupovat v instancích třídy.
Naproti tomu někteří členové třídy nejsou statické, což znamená, že k nim lze přistupovat pouze v instancích třídy. Než budete mít přístup k nestatickému členu, musíte vytvořit instanci třídy.
Když vytvoříte instanci třídy, zavolá se speciální metoda pro nastavení vlastností instance. Tato metoda se nazývá funkce konstruktoru.
Vysvětlení instancí třídy
Klíčové slovo new a název třídy používáme k vytvoření instance třídy v JavaScriptu. Uveďme například instanci třídy Array.
const myArr = new Array()
Vytváření tříd v JavaScriptu
Tato část se bude zabývat vytvořením třídy, která implementuje všechny koncepty, které jsme probrali v Sekce terminologie. Uděláme to na sérii příkladů, kde každý příklad navazuje na ty předchozí.
Vyhlášení prázdné třídy
K deklaraci třídy v JavaScriptu použijeme klíčové slovo class a pojmenujeme třídu. Dále definujeme tělo třídy. Tělo je uzavřeno ve složených závorkách a drží všechny členy třídy.
Zde je příklad deklarace třídy s prázdným tělem:
class Dog {
}
Nyní můžete vytvořit instanci třídy následujícím způsobem a vytisknout ji.
const pet = new Dog; console.log(pet);
Vytváření veřejných nemovitostí
Veřejné vlastnosti jsou definovány s identifikátorem a volitelnou hodnotou.
class Dog {
name = "Roy";
age;
}
Zde jsme definovali jméno s hodnotou řetězce a věk bez hodnoty.
const pet = new Dog(); console.log(pet.name); console.log(pet.age);
Definování veřejných metod
Můžeme přidat metody do naší třídy uvnitř jejího těla. Metodu definujeme stejným způsobem, jako bychom definovali funkci. Klíčové slovo function však vynecháme.
class Dog {
name = "Roy";
age;
walk () {
console.log("Walking");
}
}
Ve výše uvedeném příkladu jsme definovali metodu chůze. Každá instance třídy Animal bude mít tuto metodu.
const pet = new Dog(); pet.walk();
Přístup k vlastnostem z metod
V JavaScriptu obecně přistupujeme k vlastnostem objektu pomocí operátoru tečka. Pokud bychom například měli objekt s názvem osoba a chtěli bychom získat přístup k vlastnosti name, udělali bychom to následovně.
person.name
Pokud však chceme přistupovat k vlastnosti z objektu, použijeme místo názvu objektu klíčové slovo this. Zde je příklad:
this.name
Klíčové slovo this odkazuje na objekt. Pokud bychom tedy chtěli přistupovat k vlastnostem třídy z metod třídy, použili bychom tuto syntaxi.
Vytváření soukromých vlastností
Předpokládejme, že chceme, aby vlastnosti jména a věku, které jsme definovali dříve, byly soukromé. Třídu bychom předefinovali následovně:
class Dog {
#name = "Roy";
#age;
walk () {
console.log("Walking");
}
}
Jak vidíte, soukromé vlastnosti jsou specifikovány pomocí libry. Pokud byste se k nim pokusili dostat, narazili byste na chyby.
const dog = new Dog(); dog.#name
Vytváření metod Getter a Setter
Nyní jsou vlastnosti jména a věku třídy soukromé. Proto k nim lze přistupovat pouze metodami uvnitř třídy.
Pokud chceme kódu mimo třídu povolit přístup k těmto vlastnostem, definujeme gettry a settery. Udělejme to pro vlastnost name.
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
walk () {
console.log("Walking");
}
}
S výše definovanou třídou můžete nastavit název a zobrazit jej pomocí níže uvedeného kódu:
const pet = new Dog(); // Setting the name pet.name = "Rex"; // Getting the name console.log(pet.name);
Vytváření soukromých metod
Stejně jako soukromé vlastnosti mají soukromé metody předponu znak libry. Proto by deklarace soukromé metody vypadala takto:
class Dog {
#name = "Roy";
#age;
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Pokud byste se pokusili o přístup k těmto metodám mimo třídu, nefungovalo by to.
const pet = new Dog(); pet.#increaseAge();
Vytvoření metody konstruktoru
Můžete také definovat metodu konstruktoru. Tato metoda bude automaticky volána, kdykoli vytvoříte instanci nové třídy. K inicializaci vlastností lze použít metodu konstruktoru. V tomto příkladu budeme inicializovat věk a jméno podle jakýchkoli argumentů, které uživatel zadá během vytváření instance.
class Dog {
#name;
#age;
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Když vytvoříme instanci naší třídy, můžeme zadat jméno a věk.
const pet = new Dog('Roy', 3);
console.log(pet.name);
Vytváření statických vlastností a metod
Jak bylo zmíněno, ke statickým členům lze přistupovat bez předchozího vytváření instance třídy. V níže uvedeném příkladu vytvoříme statickou vlastnost a metodu.
class Dog {
#name;
#age;
static genus = "Canis";
constructor (name = "Dog", age = 0) {
this.#name = name;
this.#age = age;
}
static bark() {
console.log("Woof");
}
get name () {
return this.#name;
}
set name (value) {
this.#name = value;
}
#increaseAge() {
this.#age ++;
}
#decreaseAge () {
this.#age --;
}
walk () {
console.log("Walking");
}
}
Nyní můžete přistupovat ke statické vlastnosti a metodě bez vytváření instance.
console.log(Dog.genus); Dog.bark();
Dědictví
Třídy mohou dědit vlastnosti z jiných tříd. Třída, která dědí členy z jiné třídy, se nazývá nadtřída, zatímco třída, ze které dědí členy, je základní třída nebo podtřída.
K vytvoření nadtřídy v JavaScriptu používáme klíčové slovo extends. Zde je příklad, kdy dědíme ze třídy Dog.
class Rottweiler extends Dog {
constructor (name, age) {
super(name, age);
this.breed = 'rottweiler';
}
}
Jak vidíte, třída je z velké části stejná jako dříve. Uvnitř konstruktoru jsme však zavolali super funkci. Klíčové slovo super odkazuje na konstruktor základní třídy. Proto jsme v naší nadtřídě zavolali konstruktor základní třídy a předali jsme jméno a věk.
const myPet = new Rottweiler(); console.log(myPet);
Závěr
V tomto článku jsme se zabývali třídami. Popsali jsme, co to jsou, členové, které mohou držet, a různé klasifikace členů. To vše jsme pak ilustrovali na příkladech.
Dále si možná budete chtít přečíst otázky k pohovoru o objektově orientovaném programování.