V objektově orientované programování, třída je rozšiřitelný program-kód-šablony pro vytváření objektů, poskytující počáteční hodnoty pro stát (členské proměnné) a implementace chování (členské funkce nebo metody).
V praxi často potřebujeme vytvořit mnoho objektů stejného druhu, jako uživatelé, nebo zboží, nebo cokoliv jiného.
jak již víme z kapitoly Konstruktor, operátor „nový“, new function
s tím může pomoci.,
ale v moderním JavaScriptu existuje pokročilejší konstrukt „třídy“, který přináší skvělé nové funkce, které jsou užitečné pro objektově orientované programování.
„class“ syntaxe
základní syntaxe je:
class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...}
Pak použijte new MyClass()
vytvořit nový objekt s všechny uvedené metody.
metodaconstructor()
se nazývá automaticky new
, takže tam můžeme inicializovat objekt.,
například:
class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// Usage:let user = new User("John");user.sayHi();
Když new User("John")
se nazývá:
- nový objekt je vytvořen.
-
constructor
běží s daným argumentem a přiřadí jejthis.name
.
…pak můžeme volat objektové metody, například user.sayHi()
.
častým úskalím pro začínající vývojáře je dát čárku mezi metody třídy, které by mělo za následek chybu syntaxe.,
zápis zde nesmí být zaměňován s objektovými literály. V rámci třídy nejsou vyžadovány žádné čárky.
co je to třída?
co přesně je class
? To není úplně nová jazyková entita, jak by si člověk mohl myslet.
pojďme odhalit nějaké kouzlo a uvidíme, co je třída opravdu. To pomůže pochopit mnoho složitých aspektů.
v JavaScriptu je třída jakousi funkcí.,
Tady, podívejte se:
class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// proof: User is a functionalert(typeof User); // function
Co class User {...}
vytvořit opravdu je:
- Vytváří funkci s názvem
User
, který se stane výsledkem deklarace třídy. Funkční kód je převzat z metodyconstructor
(předpokládané prázdné, pokud takovou metodu nepíšeme). - ukládá metody třídy, například
sayHi
, vUser.prototype
.,
Po new User
objekt je vytvořen, když zavoláme jeho metodu, je převzata z prototypu, stejně, jak je popsáno v kapitole F. prototyp. Objekt má tedy přístup k metodám třídy.,class User
prohlášení jako:
Zde je kód pozorovat, že:
Není to jen syntaktický cukr
Někdy lidé říkají, že class
je „syntaktický cukr“ (syntaxe, který je navržen tak, aby dělat věci lépe číst, ale to neznamená, zavádět něco nového), protože bychom mohli prohlásit totéž, aniž class
klíčové slovo vůbec:
výsledkem této definice je zhruba stejný., Existují tedy skutečně důvody, proč lze class
považovat za syntaktický cukr, který definuje Konstruktor spolu s jeho prototypovými metodami.
stále existují důležité rozdíly.
-
nejprve je funkce vytvořená
class
označena speciální interní vlastností]:"classConstructor"
. Takže to není úplně stejné jako vytváření ručně.jazyk kontroluje tuto vlastnost na různých místech., Například, na rozdíl od normální funkce musí být volána s
new
:class User { constructor() {}}alert(typeof User); // functionUser(); // Error: Class constructor User cannot be invoked without 'new'
Také, řetězec reprezentace konstruktoru třídy ve většině JavaScript motorů začíná s „třídy…“
class User { constructor() {}}alert(User); // class User { ... }
Existují i jiné rozdíly, uvidíme je brzy.metody třídy
-
nejsou vyčíslitelné.,Definice třídy sady
enumerable
vlajkyfalse
pro všechny metody v"prototype"
.to je dobré, protože pokud
for..in
nad objektem, obvykle Nechceme jeho třídní metody. -
třídy vždy
use strict
.Veškerý kód uvnitř konstrukce třídy je automaticky v přísném režimu.
kromě tohoclass
syntax přináší mnoho dalších funkcí, které prozkoumáme později.,
výraz třídy
stejně jako funkce lze třídy definovat uvnitř jiného výrazu, projít kolem, vrátit, přiřadit atd.
Tady je příklad třídy projevu:
let User = class { sayHi() { alert("Hello"); }};
Podobně Pojmenované Funkce Výrazy, třídy výrazů může mít jméno.,
Li class výraz má jméno, je to viditelné uvnitř třídy pouze:
můžeme dokonce tříd dynamicky, „na vyžádání“, jako je tohle:
Getry/setry
Stejně jako doslovný objekty, třídy mohou zahrnovat getry/setry, počítačová vlastnosti atd.
Zde je příklad pro user.name
realizovány pomocí get/set
:
Technicky vzato, takové deklarace třídy pracuje tím, že vytvoří getter a setter v User.prototype
.,
Počítačová jména
Zde je příklad s výpočtem název metody pomocí závorek :
class User { () { alert("Hello"); }}new User().sayHi();
Tyto prvky jsou snadno zapamatovatelné, jak připomínají, že z doslovného objekty.
pole třídy
jsou nedávným přírůstkem jazyka.
dříve naše třídy měly pouze metody.
„pole třídy“ je syntaxe, která umožňuje přidat libovolné vlastnosti.,
například, řekněme, přidat name
vlastnost class User
:
class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!
Tak, právě jsme se psát “ = “ v prohlášení, a to je vše.,
důležitým rozdílem třídy pole je, že jsou nastaveny na jednotlivé objekty, User.prototype
:
class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefined
můžeme také přiřadit hodnoty pomocí složitějších výrazů a volání funkcí:
class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // John
Tvorba vázané metody s class pole
Jak je ukázáno v kapitole Funkce vazby funkce v Javascriptu mají dynamický this
., Záleží na kontextu hovoru.
pokud objekt metodu je předán kolem, a říká v jiném kontextu, this
nebude odkaz na jeho objekt.
například, tento kód se zobrazí undefined
:
problém se nazývá „ztráta this
„.
Existují dva přístupy k řešení, jak je popsáno v kapitole Funkce vazba:
- Projít obal-funkce, jako je například
setTimeout(() => button.click(), 1000)
. - vázat metodu na objekt, např. v konstruktoru.,
Class pole poskytují další, poměrně elegantní syntaxe:
class pole click = () => {...}
je vytvořen pro každý objekt, základ, tam je samostatné funkce pro každý Button
objekt, s this
uvnitř odkazování na tento objekt. Můžeme projít button.click
kdekoli a hodnota this
bude vždy správná.
to je zvláště užitečné v prostředí prohlížeče, pro posluchače událostí.,
Shrnutí
základní třídy syntaxe vypadá takto:
MyClass
je technicky fungovat (ten, který nabízíme jako constructor
), zatímco metody, getry a setry jsou zapisovány do MyClass.prototype
.
v dalších kapitolách se dozvíme více o třídách, včetně dědičnosti a dalších funkcí.