Function.bind()

Function.bind() je řešení na docela nepříjemnou bolístku Javascriptu, a tou je nastavování scope. Použijete-li ve funkci operátor this, pak potřebujete zařídit, aby odkazoval na správný objekt.

Dejme tomu, že mám třídu, která má implementovánu metodu hideFullScreen. A tu chceme zavolat při kliknutí na tlačítko. Pak budeme muset napsat takovýto kód:

var self = this;

button.addEventListener('click', function(e) {
    self.hideFullScreen();
};

Po čase zjistíme, že každá naše metoda začíná magickým přiřazením:

var self = this;

Self je tak populární název proměnné, že některé editory jej prý zvýrazňují jako klíčové slovo,  v praxi jsem se ještě setkal názvy s _this nebo me.

Funkce bind nám zařídí správný kontext:

info.addEventListener('click', function(e) {
    this.hideFullScreen();
}.bind(this));

Funkce bind vrátí novou funkci, ve které je klíčové slovo this nastaveno na hodnotu parametru této metody.

Parametr nemusí být jen this, jak jsme si ostatně ukazovali v prvním dílu Restartu, kde jsme definovali shortcut na querySelector:

var q = document.querySelector.bind(document);

Myslím že je patrné, kam vývoj JavaScriptu směřuje. Pokud pokud budeme chtít v ES6 používat přiřazení pomocí funkce let místo var, pak bind je rozumné řešení, jak do funkce „propašovat“ správný kontext.

String.trim()

Na String.trim jsem narazil víceméně náhodou. To, že je tato funkce implementována, se ke mě nějak nedoneslo, a tak jsem hledal na internetu řešení přes regulární výraz (lenost je základní vlastnost programátora), a ejhle, ono je to už implementováno.

String.trim nedělá žádné zázraky, jelikož pouze odstraní bílé znaky na začátku a konci řetězce, a výsledek vrátí jako nový řetězec (původní řetězec není ovlivněn).

Z polyfillu pak můžeme vyčíst, jak a co se vlastně dělá (pokud rádi luštíte regulární výrazy):

var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
      return this.replace(rtrim, '');
};

Roztomilá drobnost.

Date.now()

Ani funkce Date.now není nějakým zázrakem, který nám obrátí svět naruby. Leč je milé, že se objevila v ES5.1, protože nám přeci jen ušetří něco málo psaní.

Vrací počet milisekund od 1. ledna 1970, takže si zkrátíme volání:

var now = new Date().getTime()

na pouhé zavolání funkce Date.now().

Taktéž roztomilá drobnost.

Object.assign()

Object.assign je funkce, po které už dlouhá léta toužím, protože slouží k tomu, co dělám poměrně často. Kopíruje totiž vlastnosti z jednoho (i více objektů) do druhého. Pokud vás napadá, že tohle dělá v jQuery funkce jQuery.extend, tak vás to napadá správně.

Představme si situaci – třída dostává jako parametr konfigurační objekt. My jej chceme uložit, abychom později věděli, s jakou konfigurací byla třída zavolána (čili chceme udělat kopii konfiguračního objektu):

function(config) {
    this.initialConfig = Object.assign({}, config);
}

Pokračujme v krasojízdě. Třída má udělat kopii config objektu, přidat další vlastnosti a předat je nadřazené třídě – v tomto případě jde hlavně o přemapování názvu proměnných (řešení nekonzistence v názvech v SVG):

Svg.Circle = function(config) {
    config = Object.assign(config, {
        r: config.radius,
        cx: config.x,
        cy: config.y 
    });
    return Svg.Element.call(this, config);
}

Což považuji za elegantní a čitelné řešení, rozhodně čitelnější než přiřazování vlastností jednotlivě.

Zatím se neradujte, funkci jQuery.extend() zatím jednoduše nenahradíte, jelikož v současné době ji implementoval pouze Firefox (patří totiž do ES6).

Co a jak s polyfilly

Jednou za čas píšu testovací aplikaci, na které si mohu ověřit novinky bez toho, abych se musel vejít do požadavků zákazníka (například podpora IE 8). Zároveň se snažím, aby, když už něco píšu, aby to taky k něčemu bylo (takže to bývá většinou nějaký tool).

Aplikace se jmenuje Scalear a slouží pro zobrazení stupnic a akordů na strunných nástrojích. Můžete se i pokochat zdrojovým kódem. V aplikaci naleznete použití většiny funkcí popisovaných v tomto seriálu.

Při psaní této aplikace jsem si uvědomil, že nemusím užít jQuery, ale zároveň bych potřeboval některé jeho funkce. Začal jsem je tudíž implementovat, načež jsem zjistil, že jsou už v JavaScriptu a začal jsem objevovat další, které už je možné použít a které jsem si málem napsal. Takže jsem začal razit tuto strategii:

Pokud funkce existuje nebo je specifikována, nemá smysl psát vlastní implementaci, ale funkci použít, případně i její polyfill.

Jak bude pokračovat implementace funkcí do prohlížečů, dojde časem k tomu, že polyfill bude možno odstranit.

Budoucnost Javascriptu

Většina funkcí, zmiňovaných v tomto seriálu, náležela do specifikace ECMAScript 5 nebo ECMAScript 5.1, výjimečně jsem zabrousil do vod ECMAScript 6 a jednou, v případě Object.observe, dokonce do ECMAScript 7.

Jak vidno, naplánováno toho ve specifikacích není málo, a tak se máme na co těšit. Implementace ES5 v prohlížečích je prakticky u konce a v současnosti probíhá implementace ES6 a (pro mne překvapivě) i ES7 (stav implementací můžete sledovat v této tabulce).

Nabízí se otázka, zda novinky v ES6 uspějí a vývojáři je přijmou za své, nebo zda vzniká slepá větev mrtvého ramene řeky stejně jako před lety XHTML. Přeci jen JavaScript se stává komplexnějším jazykem, přibývá v něm konstrukcí a klíčových slov a tudíž narůstá doba nutná k absorbování celého jazyka.  Jestli JavaScript vyrazil správným směrem, se ukáže až časem.