Třídy základní syntaxe

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á:

  1. nový objekt je vytvořen.
  2. constructor běží s daným argumentem a přiřadí jej this.name.

…pak můžeme volat objektové metody, například user.sayHi().

, Ne čárka mezi metody třídy

č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:

  1. Vytváří funkci s názvem User, který se stane výsledkem deklarace třídy. Funkční kód je převzat z metody constructor (předpokládané prázdné, pokud takovou metodu nepíšeme).
  2. ukládá metody třídy, například sayHi, v User.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.

  1. 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

  2. nejsou vyčíslitelné.,Definice třídy sady enumerable vlajky false pro všechny metody v "prototype".

    to je dobré, protože pokud for..in nad objektem, obvykle Nechceme jeho třídní metody.

  3. 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

staré prohlížeče mohou potřebovat pole třídy polyfill

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:

  1. Projít obal-funkce, jako je například setTimeout(() => button.click(), 1000).
  2. 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í.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *