jQuery návod – (13) Klíčové slovo “this”

Dnešní díl našeho seriálu o jQuery se zaměří na jedno z nejdůležitějších slov v jazyce JavaScript a jeho použití v kontextu jQuery: klíčové slovo “this”. Toto slovo může být pro začátečníky trochu záhadné, ale s jeho pochopením přijde také mnoho možností v programování.

1. Co je “this”?

V jazyce JavaScript klíčové slovo “this” odkazuje na aktuální objekt, ve kterém je funkce spuštěna. Jeho konkrétní hodnota závisí na kontextu, ve kterém je funkce volána.

2. Použití “this” v jQuery

Při práci s jQuery se často setkáváme s “this” v rámci událostí:

$('button').click(function() {
    $(this).hide();  // Skryje tlačítko, na které bylo kliknuto
});

Výše uvedený kód přiřadí každému tlačítku na stránce událost kliknutí. Když na nějaké tlačítko kliknete, “this” v rámci funkce odkazuje právě na toto tlačítko.

3. “This” v rámci objektu

Pokud máte objekt s metodami, “this” vám umožní přistupovat k vlastnostem a metodám tohoto objektu:

var osoba = {
    jmeno: "Jan",
    pozdrav: function() {
        console.log("Ahoj, mé jméno je " + this.jmeno);
    }
};

osoba.pozdrav();  // Vypíše: "Ahoj, mé jméno je Jan"

4. Běžné chyby s “this”

Jednou z běžných chyb, které programátoři dělají, je ztráta kontextu “this”. Například v asynchronní funkci:

$('button').click(function() {
    setTimeout(function() {
        $(this).hide();  // Zde "this" již neodkazuje na tlačítko
    }, 1000);
});

Tento problém můžete vyřešit pomocí uzavírání “this” do proměnné:

$('button').click(function() {
    var that = this;
    setTimeout(function() {
        $(that).hide();  // Správně odkazuje na tlačítko
    }, 1000);
});

5. Použití “call” a “apply” pro změnu hodnoty “this”

Metody “call” a “apply” vám umožní explicitně určit, co “this” v dané funkci odkazuje:

function pozdrav(slovo) {
    console.log(slovo + ", mé jméno je " + this.jmeno);
}

var osoba = {jmeno: "Petr"};

pozdrav.call(osoba, "Ahoj");  // Vypíše: "Ahoj, mé jméno je Petr"

Závěr

Klíčové slovo “this” je základním stavebním kamenem jazyka JavaScript a je nezbytné pro efektivní práci s jQuery. Doufám, že tento článek vám pomohl lépe porozumět jeho chování a použití.

V příštím a posledním díle našeho seriálu se podíváme na několik tipů a triků, které vám pomohou stát se efektivnějším a produktivnějším vývojářem v jQuery. Uvidíme se brzy!