TWS/WAP Cheatsheet

OOP

Objektově Orientované Programování - stručně řečeno:

Díky OOP můžeme vytvářet objekty, které mohou např. reprezentovat reálné věci - auto, klíče, mobil...

Postup: Vytvoření třídy (třída je něco jako šablona pro náš objekt) - vytvoření instance/objektu od této třídy

Vytvoření třídy

Syntax:

class nazevTridy { //kod }

constructor

constructor je funkce, která se volá při vytvoření objektu

class Woman { constructor() { console.log("Objekt vytvořen"); } } let woman = new Woman(); // Woman() odkazuje na constructor()

Funkce

Každý objekt může mít svoje funkce - syntax: nazevFunkce() { // kod }

class Woman { constructor() { console.log("Objekt vytvořen"); } cook() { console.log("Jdu vařit"); } shout(name) { console.log("Přestaň koukat na tu televizi " + name); } } let woman = new Woman(); // Woman() odkazuje na constructor() woman.cook(); // Jdu vařit woman.shout("Honzo"); // Přestaň koukat na tu televizi Honzo

static

Když je před něčím slovo static, tak náleží daná věc třídě -> pokud má např. funkce před názvem static, tak můžeme funkci zavolat ve stylu: NázevTřídy.statickáFunkce();

class Woman { constructor() { console.log("Objekt vytvořen"); } cook() { console.log("Jdu vařit"); } shout(name) { console.log("Přestaň koukat na tu televizi " + name); } static staticFunction() { console.log("Statická funkce") } } Woman.staticFunction(); // Statická funkce - rovnou ji voláme přes třídu - nemusíme vytvářet objekt, jelikož je statická

Vlastnosti

Každý objekt může mít různé vlastnosti např. jméno, věk...

Pro nastavování vlastností našeho objektu používáme syntax: this.vlastnost = hodnota;

Slovo this odkazuje na náš objekt uvnitř třídy

class Woman { constructor(name, age) { this.name = name; this.age = age; } printNameAndAge() { console.log(`${this.name}: ${this.age}`); } } let woman = new Woman("Radka", 20); woman.printNameAndAge();

extends

Třídy mohou z jiných tříd dědit. K dědění slouží slovíčko extends - syntax: nazevTridy extends nazevJineTridy { // kód }

class Human { constructor(name, age) { this.name = name; this.age = age; } humanFunction() { console.log("Human function"); } } class Woman extends Human { constructor(name, age) { super(name, age); // super odkazuje na rodičovskou třídu - Human, v našem případě odkazujeme na constructor ze třídy Human } printNameAndAge() { console.log(`${this.name}: ${this.age}`); } } let woman = new Woman("Radka", 20); woman.printNameAndAge(); woman.humanFunction(); // na humanFunction() lze zavolat jelikož dědíme třídu Human

Example

<!DOCTYPE html> <html> <head> </head> <body> <script> class Human { constructor(name, age) { this.name = name; this.age = age; } humanFunction() { console.log("Human function"); } } class Woman extends Human { constructor(name, age) { super(name, age); // super odkazuje na rodičovskou třídu - Human, v našem případě odkazujeme na constructor ze třídy Human } printNameAndAge() { console.log(`${this.name}: ${this.age}`); } } let woman = new Woman("Radka", 20); woman.printNameAndAge(); woman.humanFunction(); // na humanFunction() lze zavolat jelikož dědíme třídu Human </script> </body> </html>

Page

PS: Logy se zobrazují v konzoli - F12 - console