⚡ BI-PJS – Programování v JavaScriptu

🔗 Prototype a prototypový řetězec

JavaScript není class-based jazyk v klasickém smyslu – pod kapotou je to prototype-based dědičnost. Klíčové slovo class (ES6+) je pouze syntaktický cukr nad prototypy.

• Vlastní vlastnosti (own properties) – definovány přímo na objektu (this.name = ...)
• Zděděné vlastnosti (inherited properties) – přístupné přes __proto__, ale nepatří přímo objektu
• __proto__ – přímý přístup na prototype chain (zastaralé, preferuj Object.getPrototypeOf() / Object.setPrototypeOf())

const obj1 = { a: 1 }
const obj2 = { b: 2 }
obj1.__proto__ = obj2
// `a` je vlastní vlastnost obj1
// `b` je dostupné přes __proto__ (zděděné)

Proč to tak je? JS byl navržen jako lehký, flexibilní jazyk. Místo pevné třídní hierarchie (jako Java) umožňuje objektům dědit přímo od jiných objektů – to je výkonnější a flexibilnější pro dynamické prostředí browseru.

Vyhledávání vlastnosti (property lookup)

1. Existuje vlastnost jako own property na objektu?
2. Má objekt __proto__? → hledej na __proto__
3. Má __proto__ také svůj __proto__? → pokračuj nahoru
4. Dosáhl jsi null? → vlastnost neexistuje (undefined)

user.toString()
// 1. toString() na user? Ne
// 2. user.__proto__ = User.prototype → toString()? Ne
// 3. User.prototype.__proto__ = Object.prototype → toString()? ANO ✓

🏗️ Konstruktory, new a Factory.prototype

Evoluce přístupu k vytváření objektů se sdílenými metodami:

function User(name) {
  const user = {
    name,
    sayHi: function() { return this.name }
  }
  return user
}
// Pro 1000 uživatelů vznikne 1000 kopií sayHi() → plýtvání pamětí!

function User(name) {
  // this = {}
  // this.__proto__ = User.prototype
  // this.constructor = User
  this.name = name
  // return this  ← implicitně
}
User.prototype = {
  sayHi: function() { return this.name }
}
const user = new User('Pepa')

Klíčový vztah: instance.__proto__ === Factory.prototype — to platí vždy, např. [].__proto__ === Array.prototype.

const commonMethods = { sayHi() { return this.name } }
function User(name) {
  // Vytvoří objekt s daným prototypem, bez new
  const user = Object.create(commonMethods, {
    name: { value: name }
  })
  return user
}
// Problém: chybí .constructor, nefunguje instanceof správně

👉 Klíčové slovo this

Hodnota this závisí na způsobu volání funkce:

class Timer {
  constructor() { this.count = 0 }
  start() {
    // Zde this = undefined nebo window, NE Timer instance!
    setTimeout(function() { this.count++ }, 1000)
    // Řešení 1: arrow funkce
    setTimeout(() => { this.count++ }, 1000)
    // Řešení 2: bind
    setTimeout(function() { this.count++ }.bind(this), 1000)
  }
}

Proč arrow funkce nemá vlastní this? Arrow funkce byly zavedeny v ES6 právě proto, aby vyřešily problém se ztrátou kontextu v callbackech. Jejich this je zachyceno lexikálně v okamžiku definice.

🧬 Prototypová dědičnost (bez class)

Pro zdědění vlastních vlastností i prototypálních metod je potřeba kombinovat dva přístupy:

FootballPlayer.prototype = Human.prototype
FootballPlayer.prototype.sayTeam = function() { return this.team }
// ❌ Přepíše i Human.prototype! Všechny Human instance by získaly sayTeam.

function Human(name) {
  this.name = name
}
Human.prototype = {
  sayName() { return this.name }
}

function FootballPlayer(name, team) {
  Human.call(this, name)  // ← zdědění VLASTNÍCH vlastností
  this.team = team
}
// Nový objekt s Human.prototype jako __proto__, mutace se nešíří nahoru
FootballPlayer.prototype = Object.create(Human.prototype)
FootballPlayer.prototype.sayTeam = function() { return this.team }

Proč Object.create a ne new Human()? new Human() by spustilo konstruktor Human (nežádoucí vedlejší efekty). Object.create(Human.prototype) vytvoří objekt s daným prototypem bez spuštění konstruktoru.

Object.create = Object.create || function(proto) {
  const F = function() {}
  F.prototype = proto
  return new F()
  // Vytvoří prázdný objekt, jehož __proto__ je proto
}

Shrnutí kroků pro správnou prototypovou dědičnost:

1. Vlastní vlastnosti: ParentConstructor.call(this, ...args) uvnitř child konstruktoru
2. Prototypální metody: Child.prototype = Object.create(Parent.prototype)
3. Přidat child-specifické metody: Child.prototype.newMethod = ...

🏛️ Syntaxe class (ES6+)

class Human {
  constructor(name) { this.name = name }
  sayName() { return this.name }
}
class FootballPlayer extends Human {
  constructor(name, team) {
    super(name)   // ≡ Human.call(this, name)
    this.team = team
  }
  sayTeam() { return this.team }
}
// extends Human  ≡  Object.create(Human.prototype)
// super(name)    ≡  Human.call(this, name)
// Metody jsou stále na Human.prototype / FootballPlayer.prototype

Klíčová pravidla pro class:

• super() musí být voláno v child konstruktoru před použitím this
• Třídy nemají hoisting jako funkce (temporal dead zone)
• class tělo je vždy ve strict mode
• typeof MyClass === 'function' – je to funkce!

Private fields (#)

class Human {
  #age
  constructor() { this.#age = 30 }
  isAdult() { return this.#age > 18 }
}
const user = new Human()
console.log(user.isAdult()) // true
console.log(user.#age)      // ❌ SyntaxError

🧩 Mixiny a kompozice

Existují dva hlavní přístupy:

1. Class mixins (funkce vracející třídu)

const WithTimestamps = Base => class extends Base {
  constructor(...args) {
    super(...args)
    this.createdAt = new Date()
    this.updatedAt = new Date()
  }
  touch() { this.updatedAt = new Date() }
}
const WithId = Base => class extends Base {
  constructor(...args) {
    super(...args)
    this.id = crypto.randomUUID()
  }
}
class Model {}
class User extends WithTimestamps(WithId(Model)) {
  constructor(name) { super(); this.name = name }
}
const u = new User("Petr")
u.touch()

2. Kompozice objektů (bez dědičnosti)

const asNamed = name => ({ name })
const asTimestamps = () => {
  let createdAt = new Date(), updatedAt = new Date()
  return {
    get createdAt() { return createdAt },
    get updatedAt() { return updatedAt },
    touch() { updatedAt = new Date() }
  }
}
const createUser = name => Object.assign({}, asNamed(name), asTimestamps())
const user = createUser('Petr')
user.touch()

🧊 Kopírování objektů a jejich zmrazení

structuredClone()

const o1 = { a: 1 }
const o2 = Object.create(o1, {
  b: { value: 2, enumerable: true  },  // ✅ bude zkopírováno
  c: { value: 3, enumerable: false },  // ❌ non-enumerable → ne
  f: { value: () => {}, enumerable: false } // ❌ funkce → chyba pokud enumerable
})
const copy = structuredClone(o2)
console.log(copy) // { b: 2 }
// `a` chybí (inherited), `c` a `f` chybí (non-enumerable / funkce)

Object.freeze / seal / preventExtensions

Poznámka: všechny tyto metody jsou mělké (shallow) – vnořené objekty zůstávají modifikovatelné.

Proxy objects

const handler = {
  get(target, prop) {
    console.log(`Čtení vlastnosti: ${prop}`)
    return target[prop]
  }
}
const proxy = new Proxy({ name: 'Pepa' }, handler)
proxy.name // → "Čtení vlastnosti: name"

🔍 Iterace přes vlastnosti a výkonnostní optimalizace

Získání všech vlastností (včetně zděděných)

// Imperativní styl
function getAllProps(obj) {
  const props = Object.getOwnPropertyNames(obj)
  while (obj = Object.getPrototypeOf(obj)) {
    props.push(...Object.getOwnPropertyNames(obj))
  }
  return props
}
// Funkcionální styl (rekurzivní)
function getAllProps(obj) {
  const proto = Object.getPrototypeOf(obj)
  const props = Object.getOwnPropertyNames(obj)
  return proto ? [...props, ...getAllProps(proto)] : props
}

Hidden Classes (skryté třídy)

Proto se nedoporučuje:

• Dynamicky přidávat vlastnosti objektu po vytvoření v různém pořadí
• Mutovat __proto__ po vytvoření objektu
• Mazat vlastnosti (delete obj.prop) – způsobí přechod na pomalejší hidden class

⚙️ Asynchronicita vs. multithreading

🔄 Event Loop – srdce JS asynchronicity

Komponenty systému:

• Call Stack (zásobník volání) – LIFO struktura uchovávající prováděné funkce. Každé volání funkce přidá frame na zásobník, návrat ho odebere.
• Web APIs / Node.js APIs – prostředí runtime obsluhující asynchronní operace (setTimeout, fetch, DOM events, fs.readFile...). Mohou využívat interně vlákna.
• Callback Queue / Task Queue (macro queue) – fronta callbacků čekajících na zpracování (z setTimeout, DOM events, fetch...).
• Microtask Queue – prioritní fronta pro mikrotasky (Promise.then, queueMicrotask, MutationObserver).
• Event Loop – vybírá úlohy z front a vkládá je do call stacku.

Micro queue vs. Macro queue

requestAnimationFrame a requestIdleCallback

• requestAnimationFrame(cb) – spustí callback před dalším překreslením obrazovky (typicky 60× za sekundu). Ideální pro animace – eliminuje „trhání" oproti setTimeout.
• requestIdleCallback(cb) – spustí callback v době, kdy browser nemá jinou práci (idle time). Vhodné pro méně prioritní úkoly (analytika, prefetching). Negarantuje čas spuštění.

😱 Callback Hell – problém klasických callbacků

getUser(id, (err, user) => {
  if (err) return handleError(err)
  getSettings(user.id, (err, settings) => {
    if (err) return handleError(err)
    fetchData(settings.endpoint, (err, data) => {
      if (err) return handleError(err)
      transform(data, (err, result) => {
        // ... stále hlubší a hlubší vnoření → callback hell
      })
    })
  })
})

Problémy: nečitelnost, opakované if (err) return handleError(err), složité sdílení proměnných mezi úrovněmi.

🤝 Promise – objekt zapouzdřující asynchronní hodnotu

Interní struktura Promise:

Promise {
  [[State]]   = "pending" | "fulfilled" | "rejected"
  [[Result]]  = undefined | hodnota | error
  [[FulfillQ]] = []  // fronty callbacků
  [[RejectQ]]  = []
}

Vytvoření Promise

function get(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) resolve(xhr.responseText)
        else reject(xhr.status)
      }
    }
    xhr.send()
  })
}

Promise chaining (.then, .catch, .finally)

get('/api/user')
  .then(user => get(`/api/permissions?uid=${user.id}`))
  .then(perms => get(`/api/token?scopes=${perms.scopes.join(",")}`))
  .then(token => get(`/api/report?token=${token.token}`))
  .then(report => console.log("done:", report))
  .catch(err => console.error('chyba:', err))
  .finally(() => console.log('vždy se spustí'))

Proč vrácením Promise z .then dostaneme chain? Metoda .then() vždy vrátí nový Promise. Pokud callback vrátí Promise, nový Promise „přijme" jeho výsledek (unwrapping). Tím vzniká lineární chain místo vnoření.

Statické metody Promise

// Problém: user je mimo scope v pozdějším .then()
const userP = get('/api/user')
const permsP = userP.then(user => get(`/api/permissions?uid=${user.id}`))
const tokenP = Promise.all([userP, permsP]).then(([user, perms]) =>
  get(`/api/token?uid=${user.id}&scopes=${perms.scopes.join(",")}`)
)
Promise.all([userP, permsP, tokenP]).then(([user, perms, token]) => {
  console.log("done:", { user, perms, token })
})

⚡ Generátory – „líné" funkce s yield

Klíčové vlastnosti:

• Funkce function* při zavolání okamžitě nespustí tělo – vrátí iterator.
• Každé volání generator.next(value) pokračuje až do dalšího yield.
• Hodnota předaná do next(value) se stane hodnotou výrazu yield uvnitř funkce.
• Generátor je dokončen, když dosáhne return nebo konce funkce ({ value: ..., done: true }).

function* counter() {
  let i = 0
  while (true) {
    const reset = yield i  // pozastavit, předat i volajícímu
    if (reset) i = 0
    else i++
  }
}
const gen = counter()
gen.next()    // { value: 0, done: false }
gen.next()    // { value: 1, done: false }
gen.next(true) // { value: 0, done: false } – reset!

Generátory jako základ pro async/await

Historicky byl async/await implementován pomocí generátorů a „runneru". Generátor pozastaví výpočet u yield promise, runner počká na splnění promise a výsledek předá zpět přes next(result):

function* main() {
  const status = yield fetch('https://api.example.com/data')
  const json = yield status.json()
  console.log(json)
}
function run(gen) {
  const g = gen()
  ;(function loop(value) {
    const next = g.next(value)
    if (!next.done) next.value.then(result => loop(result))
  })()
}
run(main)

✨ async / await – syntaktický cukr nad Promises

async function loadData() {
  try {
    const response = await fetch('/api/data')   // pozastaví loadData()
    const data = await response.json()
    return data  // zabaleno do Promise.resolve(data)
  } catch (e) {
    console.error('Chyba:', e)
    // await na rejected Promise hodí výjimku → zachytíme try/catch
  }
}
// Ekvivalent generátoru z předchozí sekce!

Paralelní vs. sekvenční await

// ❌ SEKVENČNÍ – každý čeká na předchozí (pomalé!)
const a = await fetchA()
const b = await fetchB()

// ✅ PARALELNÍ – oba požadavky spuštěny najednou
const [a, b] = await Promise.all([fetchA(), fetchB()])

Top-level await (ES2022)

V modulech (type="module") lze používat await na nejvyšší úrovni bez obalení do async funkce:

// module.js
const data = await fetch('/api/config').then(r => r.json())

🛑 AbortController & AbortSignal

const controller = new AbortController()
const btn = document.querySelector('#cancel')
btn.addEventListener('click', () => controller.abort())

try {
  const res = await fetch('/api/slow', { signal: controller.signal })
  const data = await res.json()
  console.log('ok', data)
} catch (e) {
  if (e.name === 'AbortError') console.log('Požadavek zrušen')
  else throw e  // jiná chyba – znovu hodit
}

AbortSignal lze propojit i s jinými API: addEventListener('event', handler, { signal }) – při abortu se listener automaticky odstraní.

🌊 Asynchronní iterátory a for await...of

async function* asyncNumbers() {
  yield 1
  await new Promise(r => setTimeout(r, 100))
  yield 2
  yield 3
}

;(async () => {
  for await (const num of asyncNumbers()) {
    console.log(num)  // 1, pak 2, pak 3
    // break → zavře iterátor (spustí return())
  }
})()

Praktické využití: čtení streamů (ReadableStream), postupné zpracování výsledků z databáze, Server-Sent Events.

async function* (asynchronní generátor)

Kombinace async a function* – může používat jak await, tak yield. Vhodné pro produkci sekvencí hodnot, kde každá může být asynchronně získána.

⏱️ Debounce a Throttle

// Debounce – volej až po pauze
const debounce = (fn, wait = 200) => {
  let timer
  return (...args) => {
    clearTimeout(timer)               // zruš předchozí timer
    timer = setTimeout(() => fn(...args), wait)  // naplánuj nový
  }
}
window.addEventListener('input', debounce(e => search(e.target.value), 250))

// Throttle – volej maximálně jednou za interval
const throttle = (fn, wait = 100) => {
  let locked = false
  return (...args) => {
    if (locked) return           // blokováno – ignoruj
    locked = true
    fn(...args)                  // okamžité volání
    setTimeout(() => { locked = false }, wait)  // uvolni po wait ms
  }
}
window.addEventListener('scroll', throttle(() => updateUI(), 100))