Nativní prototypy

Vlastnost "prototype" je zeÅ¡iroka využívána samotným jádrem JavaScriptu. Používají ji vÅ¡echny zabudované konstruktory.

Nejprve se podíváme na detaily a pak na to, jak ji využít k přidání nových schopností vestavěným objektům.

Object.prototype

Řekněme, že vypíšeme prázdný objekt:

let obj = {};
alert( obj ); // "[object Object]" ?

Kde je kód, který vygeneruje Å™etÄ›zec "[object Object]"? Je to vestavÄ›ná metoda toString, ale kde je? Objekt obj je prázdný!

…Krátká notace obj = {} je vÅ¡ak totéž jako obj = new Object(), kde Object je vestavÄ›ný konstruktor objektu se svou vlastní vlastností prototype, která odkazuje na obrovský objekt s metodou toString a jinými.

Děje se následující:

Když je zavolán new Object() (nebo je vytvoÅ™en literální objekt {...}), jeho [[Prototype]] se nastaví na Object.prototype podle pravidla, které jsme probrali v pÅ™edchozí kapitole:

Když je tedy volána metoda obj.toString(), pÅ™evezme se z Object.prototype.

Můžeme si to ověřit následovně:

let obj = {};

alert(obj.__proto__ === Object.prototype); // true

alert(obj.toString === obj.__proto__.toString); //true
alert(obj.toString === Object.prototype.toString); //true

Prosíme vÅ¡imnÄ›te si, že v uvedeném Å™etÄ›zci není nad Object.prototype žádný další [[Prototype]]:

alert(Object.prototype.__proto__); // null

Jiné zabudované prototypy

Metody v prototypech si uchovávají i jiné vestavÄ›né objekty, napÅ™. Array, Date, Function a jiné.

Například když vytvoříme pole [1, 2, 3], vnitÅ™nÄ› se použije standardní konstruktor new Array(). Takže jeho prototypem se stane a metody mu poskytne Array.prototype. To značnÄ› Å¡etří paměť.

Podle specifikace mají vÅ¡echny vestavÄ›né prototypy na svém vrcholu Object.prototype. Proto se také nÄ›kdy říká, že „vÅ¡echno je zdÄ›dÄ›no z objektů“.

Zde je celkový přehled na obrázku (pro tři zabudované objekty, které se na něj vejdou):

Ověřme prototypy ručně:

let pole = [1, 2, 3];

// dědí z Array.prototype?
alert( pole.__proto__ === Array.prototype ); // true

// pak z Object.prototype?
alert( pole.__proto__.__proto__ === Object.prototype ); // true

// a na vrcholu je null.
alert( pole.__proto__.__proto__.__proto__ ); // null

NÄ›které metody v prototypech se mohou pÅ™ekrývat, například Array.prototype má svou vlastní metodu toString, která vypíše prvky oddÄ›lené čárkou:

let pole = [1, 2, 3]
alert(pole); // 1,2,3 <-- výsledek metody Array.prototype.toString

Jak jsme už vidÄ›li, Object.prototype má rovněž toString, ale Array.prototype je v Å™etÄ›zci blíž, takže se použije varianta pro pole.

DÄ›dičnost zobrazují i prohlížečové nástroje, například vývojářská konzole v Chrome (pro vestavÄ›né objekty bude možná nutné použít console.dir):

Takto fungují i jiné zabudované objekty, dokonce i funkce – to jsou objekty z vestavÄ›ného konstruktoru Function a jejich metody (call/apply a jiné) se berou z Function.prototype. Také funkce mají svůj vlastní toString.

function f() {}

alert(f.__proto__ == Function.prototype); // true
alert(f.__proto__.__proto__ == Object.prototype); // true, zděděna z objektů

Primitivy

Nejzrádnější věc se děje s řetězci, čísly a booleany.

Jak si pamatujeme, nejsou to objekty. Pokud se vÅ¡ak pokusíme pÅ™istoupit k jejich vlastnostem, vytvoří se pomocí vestavÄ›ných konstruktorů String, Number a Boolean dočasné obalové objekty, které poskytnou své metody a zmizí.

Tyto objekty se vytvoří pro nás neviditelnÄ› a vÄ›tÅ¡ina motorů je vyoptimalizuje, ale pÅ™esnÄ› tímto způsobem to popisuje specifikace. Metody tÄ›chto objektů rovněž pÅ™ebývají v prototypech, které jsou dostupné jako String.prototype, Number.prototype a Boolean.prototype.

Měnění nativních prototypů

Nativní prototypy lze modifikovat. Například pÅ™idáme-li metodu do String.prototype, bude dostupná ve vÅ¡ech Å™etÄ›zcích:

String.prototype.zobraz = function() {
  alert(this);
};

"BUM!".zobraz(); // BUM!

Během procesu vývoje nás může napadnout, že bychom chtěli mít i další zabudované metody, a můžeme mít sklon přidat je do nativních prototypů. To je však obecně špatný nápad.

V moderním programování existuje jen jeden případ, kdy je modifikace nativních prototypů vhodná. Tím je polyfilling.

Polyfilling je pojem označující vytvoření náhrady za metodu, která existuje ve specifikaci JavaScriptu, ale některý motor JavaScriptu ji ještě nepodporuje.

Pak ji můžeme implementovat ručně a vsadit ji do zabudovaného prototypu.

Například:

if (!String.prototype.repeat) { // pokud žádná taková metoda není,
  // přidáme ji do prototypu

  String.prototype.repeat = function(n) {
    // opakuje řetězec n-krát

    // ve skutečnosti by kód měl být trochu složitější
    // (úplný algoritmus je ve specifikaci),
    // ale i nedokonalý polyfill se často považuje za dost dobrý
    return new Array(n + 1).join(this);
  };
}

alert( "La".repeat(3) ); // LaLaLa

Vypůjčení z prototypů

V kapitole Dekorátory a přesměrování, call/apply jsme hovořili o vypůjčování metod.

To se děje tak, že vezmeme metodu z jednoho objektu a zkopírujeme ji do druhého.

Některé metody z nativních prototypů se vypůjčují často.

Například jestliže vytváříme objekt podobný poli, můžeme do nÄ›j chtít zkopírovat nÄ›které metody z Array.

Například:

let obj = {
  0: "Ahoj",
  1: "světe!",
  length: 2,
};

obj.join = Array.prototype.join;

alert( obj.join(',') ); // Ahoj,světe!

Funguje to, protože vnitÅ™ní algoritmus vestavÄ›né metody join se zajímá jen o správné indexy a vlastnost length. Nekontroluje, zda objekt je skutečnÄ› pole. Takto se chová mnoho zabudovaných metod.

Další možností je použít dÄ›dičnost tak, že nastavíme obj.__proto__ na Array.prototype, takže v obj budou automaticky dostupné vÅ¡echny metody Array.

To vÅ¡ak není možné, pokud již obj dÄ›dí z jiného objektu. Pamatujte, že můžeme dÄ›dit jen z jednoho objektu najednou.

Vypůjčování metod je flexibilní a umožňuje nám smíchat funkcionality z různých objektů, jestliže je potřebujeme.

Shrnutí

• VÅ¡echny vestavÄ›né objekty se chovají podle stejného vzorce:
  • Metody jsou uloženy v prototypu (Array.prototype, Object.prototype, Date.prototype, atd.).
  • Samotný objekt si ukládá pouze data (prvky pole, vlastnosti objektu, datum).
• Rovněž primitivy mají metody uložené v prototypech obalů: Number.prototype, String.prototype a Boolean.prototype. Obalové objekty nemají pouze undefined a null.
• VestavÄ›né prototypy lze modifikovat nebo do nich vkládat nové metody, ale mÄ›nit je se nedoporučuje. PravdÄ›podobnÄ› jediný pÅ™ijatelný případ je, když pÅ™idáváme nový standard, ale motor JavaScriptu ho jeÅ¡tÄ› nepodporuje.