Mixiny

V JavaScriptu můžeme dÄ›dit jen z jednoho objektu. Objekt může mít jen jeden [[Prototype]] a třída může rozÅ¡iÅ™ovat pouze jednu jinou třídu.

To se vÅ¡ak nÄ›kdy může zdát omezující. Máme například třídu ZametačUlic a třídu Bicykl a chtÄ›li bychom vytvoÅ™it jejich smÄ›s: ZametacíBicykl.

Nebo máme třídu Uživatel a třídu GenerátorUdálostí, která implementuje generování událostí, a rádi bychom pÅ™idali funkcionalitu třídy GenerátorUdálostí do třídy Uživatel, aby naÅ¡i uživatelé mohli generovat události.

Koncept, který nám s tím pomůže, existuje a nazývá se „mixiny“.

Jak je definováno ve Wikipedii, mixin je třída obsahující metody, které mohou být používány v jiných třídách, aniž by z ní tyto třídy musely být zděděny.

Jinými slovy, mixin poskytuje metody, které implementují určité chování, ale nepoužíváme ho samostatně, nýbrž přidáváme jeho chování do jiných tříd.

Příklad mixinu

Nejjednodušší způsob, jak implementovat mixin v JavaScriptu, je vytvořit objekt s užitečnými metodami, abychom je mohli snadno připojit do prototypu libovolné třídy.

Například zde je použit mixin mixinŘekniAhoj, aby do třídy Uživatel pÅ™idal nÄ›jaké „mluvení“:

// mixin
let mixinŘekniAhoj = {
  řekniAhoj() {
    alert(`Ahoj ${this.jméno}`);
  },
  řekniNashle() {
    alert(`Nashle ${this.jméno}`);
  }
};

// použití:
class Uživatel {
  constructor(jméno) {
    this.jméno = jméno;
  }
}

// zkopírujeme metody
Object.assign(Uživatel.prototype, mixinŘekniAhoj);

// nyní Uživatel může říci ahoj
new Uživatel("Jan").řekniAhoj(); // Ahoj Jan

Není tady žádná dÄ›dičnost, ale jen prosté kopírování metod. Uživatel tedy může dÄ›dit z jiné třídy a současnÄ› zahrnout mixin, aby „pÅ™imíchal“ („mix-in“) další metody, například:

class Uživatel extends Osoba {
  // ...
}

Object.assign(Uživatel.prototype, mixinŘekniAhoj);

Mixiny mohou využívat dědičnost mezi sebou.

Například zde mixinŘekniAhoj dÄ›dí z mixinŘekni:

let mixinŘekni = {
  řekni(věta) {
    alert(věta);
  }
};

let mixinŘekniAhoj = {
  __proto__: mixinŘekni, // (nebo můžeme k nastavení prototypu použít Object.setPrototypeOf)

  řekniAhoj() {
    // volání rodičovské metody
    super.řekni(`Ahoj ${this.jméno}`); // (*)
  },
  řekniNashle() {
    super.řekni(`Nashle ${this.jméno}`); // (*)
  }
};

class Uživatel {
  constructor(jméno) {
    this.jméno = jméno;
  }
}

// zkopírujeme metody
Object.assign(Uživatel.prototype, mixinŘekniAhoj);

// nyní Uživatel může říci ahoj
new Uživatel("Jan").řekniAhoj(); // Ahoj Jan

Prosíme vÅ¡imnÄ›te si, že volání rodičovské metody super.řekni() z mixinŘekniAhoj (na řádcích označených (*)) hledá metodu v prototypu onoho mixinu, ne této třídy.

Zde je diagram (viz pravou část):

Je to proto, že metody řekniAhoj a řekniNashle byly původnÄ› vytvoÅ™eny v mixinŘekniAhoj. I když jsou tedy zkopírovány, jejich interní vlastnost [[HomeObject]] se odkazuje na mixinŘekniAhoj, jak je vidÄ›t na uvedeném obrázku.

Když super hledá rodičovské metody v [[HomeObject]].[[Prototype]], znamená to, že prohledává mixinŘekniAhoj.[[Prototype]].

MixinUdálosti

Vytvořme nyní mixin pro skutečný život.

Důležitou vlastností mnoha objektů prohlížeče (například) je, že mohou generovat události. Události jsou skvělý způsob, jak „vysílat informaci“ každému, kdo ji chce. Vytvořme tedy mixin, který nám umožní snadno přidat funkce vztažené k události do jakékoli třídy nebo objektu.

• Mixin bude poskytovat metodu .spusť(název, [...data]), která bude „generovat událost“, když se stane nÄ›co důležitého. Argument název je název události, za nímž mohou následovat další argumenty s daty události.
• Dále metodu .zapni(název, handler), která pÅ™idá funkci handler jako posluchače událostí se zadaným názvem. Funkce handler bude volána, když se spustí událost se zadaným názvem název, a pÅ™evezme argumenty z volání .spusť.
• …A metodu .vypni(název, handler), která odstraní posluchače handler.

Po pÅ™idání mixinu bude objekt uživatel moci generovat událost "přihlášen", když se uživatel pÅ™ihlásí. A jiný objekt, tÅ™eba kalendář, bude moci takovým událostem naslouchat, aby pak načetl kalendář pro pÅ™ihlášenou osobu.

Nebo menu může generovat událost "vybrán", když je vybrán jeho prvek, a jiné objekty mohou pÅ™iÅ™azovat handlery, které budou na tuto událost reagovat. A tak dále.

Zde je kód:

let mixinUdálosti = {
  /**
   * Přihlášení k naslouchání události, použití:
   *  menu.zapni('vybrán', function(prvek) { ... })
  */
  zapni(názevUdálosti, handler) {
    if (!this._handleryUdálostí) this._handleryUdálostí = {};
    if (!this._handleryUdálostí[názevUdálosti]) {
      this._handleryUdálostí[názevUdálosti] = [];
    }
    this._handleryUdálostí[názevUdálosti].push(handler);
  },

  /**
   * Odhlášení z naslouchání události, použití:
   *  menu.vypni('vybrán', handler)
   */
  vypni(názevUdálosti, handler) {
    let handlery = this._handleryUdálostí?.[názevUdálosti];
    if (!handlery) return;
    for (let i = 0; i < handlery.length; i++) {
      if (handlery[i] === handler) {
        handlery.splice(i--, 1);
      }
    }
  },

  /**
   * Generování události se zadaným názvem a daty
   *  this.spusť('vybrán', data1, data2);
   */
  spusť(názevUdálosti, ...argumenty) {
    if (!this._handleryUdálostí?.[názevUdálosti]) {
      return; // pro událost s tímto názvem nejsou žádné handlery
    }

    // volání handlerů
    this._handleryUdálostí[názevUdálosti].forEach(handler => handler.apply(this, argumenty));
  }
};

• .zapni(názevUdálosti, handler) – pÅ™iÅ™adí funkci handler, která se má spustit vždy, když nastane událost s uvedeným názvem. Technicky je zde vlastnost _handleryUdálostí, do níž se ukládá pole handlerů pro každý název události, a funkce je prostÄ› pÅ™idána do tohoto seznamu.
• .vypni(názevUdálosti, handler) – odstraní funkci ze seznamu handlerů.
• .spusť(názevUdálosti, ...argumenty) – generuje událost: vÅ¡echny handlery z _handleryUdálostí[názevUdálosti] jsou volány se seznamem argumentů ...argumenty.

Použití:

// Vytvoříme třídu
class Menu {
  vyber(hodnota) {
    this.spusť("vybrán", hodnota);
  }
}
// Přidáme mixin s metodami vztahujícími se k událostem
Object.assign(Menu.prototype, mixinUdálosti);

let menu = new Menu();

// přidáme handler, který bude volán při výběru:
menu.zapni("vybrán", hodnota => alert(`Vybrána hodnota: ${hodnota}`));

// spustí událost => výše uvedený handler se spustí a zobrazí:
// Vybrána hodnota: 123
menu.vyber("123");

Kdybychom nyní chtÄ›li pÅ™idat jakýkoli kód, který bude reagovat na výbÄ›r z menu, můžeme mu naslouchat pomocí menu.zapni(...).

A mixin mixinUdálosti usnadňuje pÅ™idání takového chování do tolika tříd, do kolika bychom chtÄ›li, aniž bychom naruÅ¡ovali Å™etÄ›zec dÄ›dičnosti.

Shrnutí

Mixin – je generický pojem objektově orientovaného programování: třída, která obsahuje metody pro jiné třídy.

Některé jiné jazyky umožňují vícenásobnou dědičnost. JavaScript ji nepodporuje, ale mixiny mohou být implementovány zkopírováním metod do prototypu.

Mixiny můžeme používat jako způsob rozšiřování třídy přidáváním dalšího chování, například ošetřování událostí, jak jsme viděli výše.

Mixiny se mohou stát příčinou konfliktu, jestliže náhodou přepíší již existující metody třídy. Obecně bychom si tedy měli dobře rozmyslet názvy metod v mixinu, abychom minimalizovali pravděpodobnost, že se tak stane.