Začneme stručným shrnutím a sjednocením pojmů, kterým se v našem výkladu
nevyhneme, a poznámkami k textu.

Pokud vás nějaký aspekt jazyka zaskočí, nebo pokud se vám
bude zdát, že jsem něčemu nevěnoval dostatečnou pozornost, doporučuji odkaz: https://developer.mozilla.org/en/JavaScript, který by si měl uložit každý, kdo to s Javascriptem myslí vážně. 

Na všechny příklady budeme používat službu jsFiddle, díky které si můžete příklady rovnou naživo vyzkoušet.

Českou
terminologii použiji, pouze existuje-li ustálený český ekvivalent.
Nesouhlasím s nutností překladu do češtiny za každou cenu, ba co víc,
domnívám se, že je to činnost zbytečná a škodlivá. Bez znalosti
angličtiny se programátor stejně neobejde.

Ačkoliv budu psát
o dědičnosti a objektově orientovaném programování, zmíním i
funkcionální prvky jazyka. Martin Malý mi kdysi položil otázku: Je
nějaký důvod, proč by lidi v JavaScriptu měli programovat především „objektově“ a
ne „funkcionálně“? Tato otázka klade falešné dilema. Nejlepší je znát a
využívat oba přístupy, a ty rozhodně nejsou zaměnitelné, spíše se
doplňují. Doufám, že na konci minisérie bude zřejmé jak. Ukážeme si
všechny obvyklé způsoby, jak vytvořit „třídu“, a to od nejjednoduššího po
nejsprávnější.

Tak má ten Javascript třídy, nebo nemá?

Jak by řekl sir
Humphrey, ano i ne. Javascript nemá klasické třídy. Avšak podle
definice „A class is a construct that is used as a blueprint (or
template) to create objects of that class.“ (in: http://en.wikipedia.org/wiki/Class_(computer_science)) třídy
má. Mezi programátory Javascriptu pak platí konsensus, že za třídu
považujeme konstrukční funkci, krátce konstruktor, který využívá
vlastnosti prototype. Jak se taková konstrukční funkce s vlastností
prototype liší od klasické třídy, si povíme v průběhu článku.

Přehled pojmů

Scope a closure

Upozornění:
Podrobně se tématu věnoval Petr Staníček ve svém seriálu. Já jej zde
opakuji pro osvěžení a také proto, že další úhel pohledu nikdy není na
škodu.

Scope je rozsah viditelnosti proměnné. Scope
může být globální nebo lokální. Globální scope je jeden, a v prohlížeči
jej vždy reprezentuje objekt window. Lokální scope generuje v
Javascriptu pouze funkce. Scope si lze představit jako mercedes s
tmavými skly. Zevnitř je vidět ven, ale zvenčí není vidět dovnitř.
Javascript umožňuje do sebe funkce zanořovat. Tím se tvoří scope chain. Tady už příklad trochu kulhá, ale dejme tomu, že zaparkujeme mercedes v garáži, která má okna také ztmavená. Viz příklad Scope.

Closure je
pouze jiný název pro scope. Když hovoříme o closure nějaké funkce,
hovoříme o scope, ve kterém byla funkce deklarována. Proč je vnější
scope funkce tak důležitý, že si zasluhuje vlastní název? Je to proto,
že je na něj zevnitř funkce vidět, ať už funkci voláme z jakéhokoliv
místa v programu. To je velmi užitečné, protože v Javascriptu jsou
funkce prvotřídní objekty.
To zhruba znamená, že si je můžeme ukládat do proměnných nebo předávat
argumentem, čili zacházet s nimi jako s objekty. Funkce si vždy nese
odkaz na scope, ve kterém byla deklarována. Zanořování funkcí a to, že
každá funkce má vlastní closure, jsou funkcionální prvky jazyka
Javascript.Viz názorný příklad Closure.

Objekt

V Javascriptu platí, že vše co není primitivní typ je asociativní pole,
krátce objekt. Funkce je objekt, pole je objekt, i regulární výraz je
objekt. Pro začátečníky bývá matoucí, že vše je objekt, tedy
asociativní pole, a přesto existuje samostatný typ object. Jak je to
možné? Je to jednoduché: Object je v hierarchii všech typů nejvýše, je
tedy předkem pro všechny ostatní typy, díky čemuž všichni jeho potomci
dědí jeho vlastnosti. Objekt je zkrátka v Javascriptu vše, co umožňuje
přiřadit vlastnost, a předává se referencí.

http://jsfiddle.net/V7a7x/

Funkce, metoda, konstruktor, třída

Vše, co je zmíněno
v titulku, je v Javascriptu stále a jedna tatáž funkce. Proč jí tedy
nazýváme čtyřmi jmény? Protože pojmenování určuje roli, kterou funkce
hraje. V Javascriptu funkce slouží k více účelům.

Funkce, to je prostá definice. Není přiřazena k žádné třídě, k žádnému objektu, a podle konvence se píše v camelCase, tedy s malým písmenem na začátku.

var foo = function () {};

Pokud je funkce přiřazena nějakému objektu, říkáme jí Metoda. Rovněž ji píšeme v camelCase.

user.foo();

Konstruktor, neboli konstrukční funkce, je určena k vytváření instancí. Proto se jí také říká třída. Třída a konstruktor znamená v Javascriptu to samé. Píšeme ji v PascalCase, tedy s velkým písmenem na začátku, které nám naznačí, že bychom měli použít operátor new.

var Person = function() {};
var joe = new Person();

this, kontext

Klíčové slovo this odkazuje na kontext. Kontext je objekt, ve kterém funkci voláme. V následujícím příkladu vidíme, že voláme-li funkci bane přímo, je kontextem globální objekt window. Přiřadíme-li funkci objektu user, stane se kontextem user. Jak tečkový operátor přesně funguje, si povíme později.

var bane = function() {
    this.banned = true;
};
bane();

// true
alert(window.banned);

var user = {};
user.bane = bane;
user.bane();

// true
alert(user.banned);​

Příklad: http://jsfiddle.net/Nz9TJ/

Jak
je vidět, funkce můžeme volat nad různými objekty. Většinou hovoříme o
kontextu, ve kterém je funkce volána. Kontext můžeme funkci i vnutit,
pomocí klíčových slov call a apply, jak ukazuje následující příklad: http://jsfiddle.net/KnaWr/

Techniky vytváření tříd

Ukážeme
si dvě falešné a jednu správnou. Falešné, protože ve skutečnosti nejde
o vytváření instancí tříd, ale o konstrukci podobných objektů. Jaký je
v tom rozdíl, nám postupně osvětlí příklady.

Zneužití closure

// zajímavý, avšak špatný způsob vytváření "instancí" v Javascriptu
var Animal = function(p_name) {
    var name = p_name;
    return {
        showName: function() {
            alert(name);
        }
    }
};
var kitty = Animal('Kitty'); 
// alert 'Kitty'
kitty.showName();

// false
alert(kitty instanceof Animal);

Příklad: http://jsfiddle.net/4CXkY/

Popíšeme si, co vidíme. Funkce Animal přijímá parametr p_name, který si ukládá do lokální proměnné name. Následně vrací objekt s metodou showName, která vidí lokální proměnnou name
ve svém closure. Na dalším řádku vytvářím „instanci“ kitty. Všimněte
si, bez použití operátoru new. Ten je v tomto případě zcela zbytečný,
objekt, který funkce Animal vrací, si vytvářím sám. Na posledním řádku
vidíme využití „instance“ v praxi. Každá instance je unikátní, každá má
vlastní scope (v něm je uložena proměnná name). Proměnná name je
zapouzdřena, protože je lokální, nelze ji změnit odjinud, než z vnitřku
funkce Animal.

„Hurá!, to bylo jednoduché. Takhle
jednoduše, že se dělají třídy? V tom případě mám hotovo, ještě napsat
testy, podědit a… a sakra, co když budu mít privátní metodu, jak ji
otestuji? Nijak, no nic. Teď musím ještě vytvořit „třídu“ Cat, potomka
třídy Animal… hmm, jenže jak? Možná, že kdybych…“

Stop,
takhle ne! Výše uvedený příklad ilustruje pružnost Javascriptu, ale
rozhodně není správným způsobem, jak tvořit třídy. Ukázali jsme si jej proto, že naznačuje obvyklý způsob, jakým se v Javascriptu imitují
privátní proměnné, totiž pomocí lokálních proměnných schovaných v
closure.

„Privátní“ proměnné v Javascriptu – má to smysl?

Každý javascriptový programátor by si měl uvědomit, že snaha ultimátně zapouzdřit nějakou proměnou, či rovnou celou funkcionalitu, je většinou marná. Javascript je dynamický jazyk.
Pokud do své aplikace pustíme cizí kód, o kterém nevíme, co dělá, a
proto raději „zapouzdřujeme“, trpíme falešným pocitem bezpečí. Smiřme
se s faktem, že Javascript není vhodný jazyk pro psaní software na
ovládání jaderných elektráren, a zkusme to brát jako jeho výhodu.

Pokud
v Javascriptu něco „zapouzdřujeme“, děláme to hlavně proto, abychom
čtenáři kódu naznačili: „Tohle je privátní, tak si toho nevšímej.
Nespoléhej, že tahle metoda bude vždy fungovat stejně, možná v příští
verzi nebude fungovat vůbec.“ Mírně to naznačíme podtržítkem v názvu,
brutálně pomocí closure. Jestli někde má smysl simulovat privátní
proměnné pomocí closure, tak jedině u statických objektů, tedy modulů.

Moduly

Modul v Javascriptu rovná se statický objekt. Nelze vytvářet jeho instance. Implementace snad ani nemůže být jednodušší.

var console = {
    log: function(message) {
        // ... nějaký kód
    }
};

Douglas Crockford „vymyslel“ vlastní verzi modulu, která má, považte, privátní lokální proměnné.

var console = (function() {
    var iAmPrivate = 'foo';    
    return {
        log: function(message) {
            // ... nějaký kód
        }
    }
})();

Popišme
si kód: Vytváříme anonymní funkci, kterou okamžitě voláme
(ty kulaté závorky na konci). Vnitřní scope anonymní funkce je closure
metody log. Metoda log je v objektu, který vracíme, a který se ukládá
do proměnné console. Je nemožné z vnějšku změnit proměnnou iAmPrivate,
zato je velmi jednoduché přepsat objektu console metodu log. Proto je
hra na „privátní“ proměnné v Javascriptu převážně čas mařící manýrou. Přesto se tato technika občas používá, a to ze dvou rozumných důvodů:

1. potřebujeme referenční proměnné, a nechceme špinit globální scope
2. mikrooptimalizace

jQuery
je knihovna, která se maximálně vyhýbá znečištění globálního scope.
Fakticky má pouze dvě globálně viditelné proměnné, jQuery a $. Dolar
si však jako globální magickou über funkci vybralo více knihoven.
Proto jQuery navrhuje vlastní  kód zapouzdřit takto:

(function($) {
    /* some code that uses $ */ 
})(jQuery);

Začátečník
(a, co si budeme namlouvat, i profesionál), je rád, že namísto dlouhého j
Q u e r y, může všude psát sexy dolary, aniž by riskoval konflikt s
jinou knihovnou.

Druhým, a jen zřídka rozumným, důvodem jsou mikrooptimalizace (premature optimization is the root of all evil). 

(function() {
    var EventType = SomeNamespace.InnerNamespace.ClassName.EventType;
})();

Jak
lze vidět, vytváříme si lokální referenci na EventType nějaké třídy.
Kdykoliv budeme enumeraci EventType potřebovat, odkážeme se na lokální
proměnnou. Javascript tak nebude vyhodnocovat x tečkových operátorů
stále dokola. Toto má smysl, pokud chceme „zpřehlednit“ kód, a také,
pokud nám záleží na tom, aby funkce využívající EventType, byla zhruba
o tisícinu milisekundy rychlejší. Někdy to smysl má, protože Internet
Explorer. Ale pouze pro výkonnostně kritické funkce, například $type ($type
je funkce pro detekci všech možných typů, se kterými se můžeme v
Javascriptu setkat). K modulům se ještě vrátíme, až budeme probírat
mixování.

„Vylepšené“ třídy

Následující příklad už vypadá lépe. Je tam operátor new (ten za nás vytváří objekt), používá se this (tím se na vytvořený objekt odkazujeme uvnitř metody), operátor instanceof funguje. Je to technika navržená Douglasem Crockfordem. Douglas si dokonce vytvořil vlastní názvosloví: metodě showName se říká privilegovaná, protože ačkoli je veřejná, má přístup k privátní lokální proměnné name.
Douglas Crockford udělal pro svět Javascriptu hodně, ale některé
články, věnované OOP a dědičnosti, se mu zrovna nepovedly. Ani tento
způsob není správný:

var Animal = function(p_name) {
    var name = p_name;
    // privilegovaná metoda
    this.showName = function() {
        alert(name);
    }
};
var kitty = new Animal('Kitty');
kitty.showName(); // 'Kitty' 
alert(kitty instanceof Animal); // true

(http://jsfiddle.net/EP7Mw/)

Předchozí
příklad „zneužití closure“ i tento mají společné, že ukazují „konečně
ten správný“ postup, jak mít v Javascriptu privátní členy. A oba jsou
špatné. Privátní členy můžeme akceptovat u modulů, ale tvořit třídy
tímto způsobem nelze. Vzdejte to. Funkcionální prvky Javascriptu mají
své využití jinde. Možná vám vrtá hlavou, proč jsou předchozí techniky
špatné. Každá nakonec selže na jednom z těchto bodů:

• privátní lokální proměnné a metody neotestujete
• closure a privilegované metody se pro každou instanci vytváří zas a znova, což je nemalá (a hlavně zbytečná) zátěž
• nefunguje operátor instanceof
• veškerá legrace skončí, až se pokusíte podědit takovou „třídu“
  • v potomku nelze volat metodu rodiče
  • již existující instanci nelze (elegantně) přidat nebo změnit vlastnost

Konec první části

Ukázali jsme si několik metod, jak v Javascriptu vytvářet objekty, představili jsme si jejich výhody a nevýhody, řekli si, kde se používají, a především – proč jsou špatné. V příští části se podíváme na „konečně správné“ řešení pomocí prototype.