Objektové metody, „this“

Objekty se obvykle vytvářejí tak, aby představovaly entity ze skutečného světa, například uživatele, objednávky a podobně:

let uživatel = {
  jméno: "Jan",
  věk: 30
};

A ve skutečném světě může uživatel konat nějakou akci: vybrat si něco z nákupního vozíku, přihlásit se, odhlásit se atd.

V JavaScriptu jsou tyto akce reprezentovány funkcemi ve vlastnostech.

Příklady metod

Pro začátek naučme objekt uživatel říci ahoj:

let uživatel = {
  jméno: "Jan",
  věk: 30
};

uživatel.řekniAhoj = function() {
  alert("Ahoj!");
};

uživatel.řekniAhoj(); // Ahoj!

PrávÄ› jsme použili funkční výraz, kterým jsme vytvoÅ™ili funkci a pÅ™iÅ™adili ji do vlastnosti objektu uživatel.řekniAhoj.

Pak ji můžeme volat pomocí uživatel.řekniAhoj(). Uživatel nyní umí mluvit!

Funkce, která je vlastností objektu, se nazývá jeho metoda.

Zde tedy máme metodu řekniAhoj objektu uživatel.

Samozřejmě můžeme použít jako metodu předem deklarovanou funkci, například takto:

let uživatel = {
  // ...
};

// nejprve ji deklarujeme
function řekniAhoj() {
  alert("Ahoj!");
};

// pak přidáme jako metodu
uživatel.řekniAhoj = řekniAhoj;

uživatel.řekniAhoj(); // Ahoj!

Zkratky metod

V objektovém literálu existuje i kratší syntaxe metod:

// tyto objekty dělají totéž

uživatel = {
  řekniAhoj: function() {
    alert("Ahoj");
  }
};

// zkratka metody vypadá lépe, že?
uživatel = {
  řekniAhoj() { // totéž jako „řekniAhoj: function(){...}“
    alert("Ahoj");
  }
};

Jak vidíme, můžeme vypustit slovo "function" a napsat jen řekniAhoj().

Upřímně řečeno, tyto notace nejsou zcela identické. Jsou v nich drobné rozdíly týkající se objektové dědičnosti (která bude vysvětlena později), ale na nich nám prozatím nezáleží. Téměř ve všech případech se dává přednost kratší syntaxi.

„this“ v metodách

Běžně se stává, že objektová metoda potřebuje přístup k informaci uložené v objektu, aby mohla vykonat svou práci.

Například kód uvnitÅ™ uživatel.řekniAhoj() může potÅ™ebovat jméno objektu uživatel.

K přístupu do objektu může metoda používat klíčové slovo this.

Hodnota this je objekt „pÅ™ed tečkou“, tedy ten, který byl použit k volání metody.

Například:

let uživatel = {
  jméno: "Jan",
  věk: 30,

  řekniAhoj() {
    // „this“ je „aktuální objekt“
    alert(this.jméno);
  }

};

uživatel.řekniAhoj(); // Jan

Zde bÄ›hem výkonu uživatel.řekniAhoj() hodnota this bude uživatel.

Technicky je možné pÅ™istupovat k objektu i bez this tak, že se na nÄ›j odkážeme pÅ™es vnÄ›jší promÄ›nnou:

let uživatel = {
  jméno: "Jan",
  věk: 30,

  řekniAhoj() {
    alert(uživatel.jméno); // „uživatel“ namísto „this“
  }

};

…Takový kód je vÅ¡ak nespolehlivý. Pokud se rozhodneme zkopírovat objekt uživatel do jiné promÄ›nné, napÅ™. správce = uživatel, a pÅ™epsat promÄ›nnou uživatel něčím jiným, pak budeme pÅ™istupovat k nesprávnému objektu.

To je ukázáno zde:

let uživatel = {
  jméno: "Jan",
  věk: 30,

  řekniAhoj() {
    alert( uživatel.jméno ); // povede k chybě
  }

};


let správce = uživatel;
uživatel = null; // přepíšeme, aby to bylo zřejmé

správce.řekniAhoj(); // TypeError: Cannot read property 'jméno' of null

Kdybychom uvnitÅ™ alert použili this.jméno namísto uživatel.jméno, kód by fungoval.

„this“ není vázané

V JavaScriptu se klíčové slovo this chová jinak než ve vÄ›tÅ¡inÄ› ostatních programovacích jazyků. Může být použito v libovolné funkci, i když to není metoda objektu.

V následujícím příkladu není žádná syntaktická chyba:

function řekniAhoj() {
  alert( this.jméno );
}

Hodnota this se vyhodnocuje za bÄ›hu skriptu v závislosti na kontextu.

Například zde bude stejná funkce přiřazena dvěma různým objektům a ve voláních bude mít různá „this“:

let uživatel = { jméno: "Jan" };
let správce = { jméno: "Správce" };

function řekniAhoj() {
  alert( this.jméno );
}

// použijeme stejnou funkci ve dvou objektech
uživatel.f = řekniAhoj;
správce.f = řekniAhoj;

// tato volání mají různá this
// „this“ uvnitř funkce je objekt „před tečkou“
uživatel.f(); // Jan  (this == uživatel)
správce.f(); // Správce  (this == správce)

správce['f'](); // Správce (k metodě přistupuje tečka nebo hranaté závorky - na tom nezáleží)

Platí jednoduché pravidlo: je-li volána obj.f(), pak this bÄ›hem volání f je obj. Ve výše uvedeném příkladu je to tedy uživatel anebo správce.

function řekniAhoj() {
  alert(this);
}

řekniAhoj(); // undefined

Šipkové funkce nemají „this“

Å ipkové funkce jsou zvláštní: nemají „své vlastní“ this. Pokud se v takové funkci odkážeme na this, bude pÅ™evzato z vnÄ›jší „normální“ funkce.

Například zde Å¡ipka() používá this z vnÄ›jší metody uživatel.řekniAhoj():

let uživatel = {
  křestníJméno: "Ilja",
  řekniAhoj() {
    let šipka = () => alert(this.křestníJméno);
    Å¡ipka();
  }
};

uživatel.řekniAhoj(); // Ilja

To je speciální vlastnost Å¡ipkových funkcí. Je užitečná, když ve skutečnosti nechceme mít oddÄ›lené this, ale chceme je pÅ™evzít z vnÄ›jšího kontextu. PozdÄ›ji v kapitole Å ipkové funkce podruhé prozkoumáme Å¡ipkové funkce více do hloubky.

Shrnutí

• Funkce uložené ve vlastnostech objektu se nazývají „metody“.
• Metody umožňují objektům „konat akce“, napÅ™. objekt.dělejNěco().
• Metody se na tento objekt mohou odkazovat klíčovým slovem this.

Hodnota this je definována za bÄ›hu skriptu.

• Když je funkce deklarována, může používat this, ale toto this nemá žádnou hodnotu, dokud není funkce volána.
• Funkce může být kopírována mezi objekty.
• Když je funkce volána „metodovou“ syntaxí objekt.metoda(), hodnota this bÄ›hem tohoto volání je objekt.

Prosíme vÅ¡imnÄ›te si, že Å¡ipkové funkce jsou zvláštní: nemají this. Když uvnitÅ™ Å¡ipkové funkce pÅ™istoupíme k this, pÅ™evezme se zvnÄ›jÅ¡ku.