JavaScript: The Hard Parts

Úvodem

JavaScript je starý jako PHP
Přesto mu většina vývojářů nerozumí
Jazyk pro masy ⇒ každý ví trochu ⇒ málokdo ví hodně
Navíc do jazyka poslední dobou přibývají velké novoty (ES2015/ES6)
Nejvyšší čas to dohnat!

Klíčové slovo `this`

let fun = function() { alert(this); }
fun(); /* ? */

let obj1 = { fun:fun };
let obj2 = { fun:fun };

obj1.fun(); /* this == obj1 */
obj2.fun(); /* this == obj2 */

fun == obj1.fun == obj2.fun

Klíčové slovo `this`

Pokud je při volání před názvem funkce tečka, hodnota this je objekt vlevo
Jinak je this globální jmenný prostor
this lze explicitně určit

let fun = function() { alert(this); }

let obj1 = {};
let obj2 = {};

fun.call(obj1, arg1, ...);    /* this == obj1 */
fun.apply(obj2, [arg1, ...]); /* this == obj2 */

Klíčové slovo `this` – bind

let f1 = function() { alert(this.name); }
let foo = { name:"foo" }
let bar = { name:"bar" }
f1.call(foo); /* "foo" */

let f2 = f1.bind(bar);
f2() /* "bar" */

Klíčové slovo `this` – bind

Parciální aplikace this
Lze použít i pro parciální aplikaci parametrů (zleva)
Zajímavost: bind lze do jazyka dodat (tzv. polyfill)

Klíčové slovo this – ES6 Arrow Functions

Zkrácený zápis definice (anonymních) funkcí
let plus = (a, b) => a+b;
Těla těchto funkcí mají lexikální this, tj. implicitní bind
Hodnota this v těle arrow function je vždy shodná s hodnotou this v obalující funkci

Klíčové slovo this – souhrn

Arrow function: převzato z obalující funkce
Partial application: zafixováno ve chvíli volání bind
Volání s call/apply: hodnota prvního parametru
Volání s tečkou: hodnota objektu před tečkou
Jinak undefined

Prototypová vazba

let obj1 = { klic:"hodnota" }; 
let obj2 = Object.create(obj1);
alert(obj2.klic); /* "hodnota" */

Object.getPrototypeOf(obj2) == obj1;
// obj2.__proto__  == obj1;

Prototype chain

Říkáme, že jeden objekt je prototypem druhého
Druhý nabízí vše, co první (+ možná něco navíc)
Více prototype linků = prototype chain

let obj1 = { klic:"hodnota" }; 
let obj2 = Object.create(obj1);
let obj3 = Object.create(obj2);

obj3.klic = "jina hodnota";
obj1.jinyKlic = "jeste jina hodnota";

alert(obj2.klic);     /* "hodnota" */
alert(obj3.klic);     /* "jina hodnota" */
alert(obj3.jinyKlic); /* "jeste jina hodnota" */

Prototypová vazba – tvorba objektů

V JS jsou tři způsoby tvorby objektů

Ex nihilo: let x = {p: 3.14}
S prototypovou vazbou: let x = Object.create(y)
Operátorem new

Prototypová vazba – operátor `new`

Každá funkce má (téměř prázdný) objekt .prototype
Zápis new f vytvoří nový objekt, nastaví mu prototypovou vazbu na f.prototype a vykoná nad ním f()
Terminologie: prototype vs. __proto__ vs. [[Prototype]]

Prototypová vazba – operátor `new`

diagram

let F = function() {
	this.a = 1;
}
F.prototype.b = 2;

let f = new F();
f.c = 3;

Operátor `new` vlastnoručně

function myNew(ctor, ...args) {
	let inst = Object.create(ctor.prototype);
	let result = ctor.apply(inst, args);
	return (typeof(result) == "object" ? result : inst);
}

Dědičnost pomocí prototypů

diagram

let Parent = function() {}
Parent.prototype.hi = function() { return "hello"; }

let Child = function() {}
Child.prototype = Object.create(Parent.prototype);
/* alternativně: Child.prototype = new Parent(); */

let ch = new Child();
ch.hi(); /* "hello" */

Obohacování prototypů

String.prototype.lpad = function(what, length) {
	let count = length - this.length;
	let padding = "";
	for (let i=0; i<count; i++) { padding += what; }
	return padding + this;
}

Obohacování prototypů – bind

Function.prototype.bind = function(thisObj, ...args1) {
	let fn = this;
	return function(...args2) {
		return fn.apply(thisObj, args1.concat(args2));
	}
}

Prototypy v ES6 – `class`

class Child extends Parent {
	doStuff() {
		super.doStuff();
	}
}
/* ↑↓ */
function Child() {}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.doStuff = function() {
	return Parent.prototype.doStuff();
}

Prototypy: odbočka

Nepodporujeme atribut prototype, který je u všech objektů. Tento atribut je normou povolen a přidává do objektu nové metody a atributy (případně s danou hodnotou). Tento atribut jsme neimplementovali, protože by byl problém ho implementovat a jsme toho názoru, že je k ničemu.

— prohlížeč Links, projektová dokumentace

Event loop

Vše v JS vykonáváno v jednom vlákně (výjimka: Web Workers, nerelevantní)
Neexistuje koncept přerušení vykonávání kódu
Vše asynchronní (a že toho je) musí počkat
Paralela s asynchronním programováním pomocí select/epoll

Event loop v pseudokódu

let scheduledJS = "";
let listeners = [];

while (1) {
	eval(scheduledJS); /* TADY se vykoná JS */

	if (!listeners.length) break;

	/* počkat, než bude čas na nejbližší posluchač */
	let currentListener = waitFor(listeners);

	/* naplánovat jej */
	scheduledJS = listeners[currentListener];
	delete listeners[currentListener];
}

Event loop

Jak naplánovat další vykonávání JS?

addEventListener
setTimeout/setInterval
requestAnimationFrame

Bind a setTimeout

Víte, co a proč udělá tato funkce?

function s(a) {
	while (a.length) {
		let v = a.shift();
		setTimeout(a.push.bind(a, v), v);
	}
}

Promise – elegantnější řízení toku kódu

Nevýhody callbacků

Sémanticky nepatří k parametrům
Nejasné pořadí v signatuře (a co errback?)
Podmíněně asynchronní funkce
Výjimky
Callback nesting hell

Promise – elegantnější řízení toku kódu

Objekt Promise je standardizován až v ES6
Ale lze polyfillovat (netriviálně)
Oddělení asynchronní funkce a zpracování jejího výsledku
Málokdo zná dopodrobna

Promise – konzumace

let promise = doAsyncStuff();
promise.then(okCallback, errorCallback);

promise.then(anotherCallback); // téměř se nepoužívá

promise.then(x).then(y);

Promise – konzumace asynchronně

Metoda then() vrací novou Promise, závislou na návratové hodnotě callbacku

let promise = doAsyncStuff1();
promise.then(doAsyncStuff2).then(console.log);

Promise – konzumace chyb

doAsyncStuff().then(null, onError)
doAsyncStuff().catch(onError)

// finalize v obou případech, tj. chyba se nepropaguje
doAsyncStuff().then(ok, err).then(finalize);

// implicitní try-catch kolem vykonání cb
doAsyncStuff().then(cb).catch(err);

Promise – tvorba

let pSetTimeout = function(delay) {
	let executor = function(resolve, reject) {
		setTimeout(resolve, delay);
	}
	return new Promise(executor);
}

pSetTimeout(3000).then(...);

Promise – tvorba

Izolace tvůrce a konzumenta
Jen tvůrce má právo naplnit Promise hodnotou
Exekutor je vykonán synchronně
Případné callbacky ale vždy asynchronně (viz dále)

Promise – statické metody

Promise.resolve(value), Promise.reject(error)
Promise.all(arrayOfPromises)
Promise.race(arrayOfPromises)

Promise – asynchronní vykonání

Důvod: stejné chování synchronních i asynchronních funkcí!

// stejné jako setTimeout(() => console.log(42), 0)
Promise.resolve(42).then(console.log);

console.log("lolwut");

JavaScript: The Hard Parts