Třídy JavaScriptu
ECMAScript 2015, také známý jako ES6, představil třídy JavaScript.
Třídy JavaScriptu jsou šablony pro objekty JavaScriptu.
Syntaxe třídy JavaScript
Pomocí klíčového slova class
vytvořte třídu.
Vždy přidejte metodu s názvem constructor()
:
Syntax
class ClassName {
constructor() { ... }
}
Příklad
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
Výše uvedený příklad vytvoří třídu s názvem "Auto".
Třída má dvě počáteční vlastnosti: "name" a "year".
Třída JavaScriptu není objekt.
Je to šablona pro objekty JavaScriptu.
Použití třídy
Když máte třídu, můžete ji použít k vytváření objektů:
Příklad
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);
Výše uvedený příklad používá třídu Car k vytvoření dvou objektů Car .
Metoda konstruktoru je volána automaticky při vytvoření nového objektu.
Metoda konstruktoru
Metoda konstruktoru je speciální metoda:
- Musí mít přesný název "konstruktor"
- Provádí se automaticky při vytvoření nového objektu
- Používá se k inicializaci vlastností objektu
Pokud nedefinujete metodu konstruktoru, JavaScript přidá prázdnou metodu konstruktoru.
Třídní metody
Metody tříd jsou vytvořeny se stejnou syntaxí jako objektové metody.
Pomocí klíčového slova class
vytvořte třídu.
Vždy přidejte constructor()
metodu.
Poté přidejte libovolný počet metod.
Syntax
class ClassName {
constructor() { ... }
method_1() { ... }
method_2() { ... }
method_3() { ... }
}
Vytvořte metodu třídy s názvem „věk“, která vrátí věk vozu:
Příklad
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
Parametry můžete odeslat metodám třídy:
Příklad
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age(x) {
return x - this.year;
}
}
let date = new Date();
let year = date.getFullYear();
let myCar = new
Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is
" + myCar.age(year) + " years old.";
Podpora prohlížeče
Následující tabulka definuje první verzi prohlížeče s plnou podporou tříd v JavaScriptu:
Chrome 49 | Edge 12 | Firefox 45 | Safari 9 | Opera 36 |
Mar, 2016 | Jul, 2015 | Mar, 2016 | Oct, 2015 | Mar, 2016 |
O třídách JavaScript se dozvíte mnohem více později v tomto tutoriálu.