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
});

$('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"

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);
});

$('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);
});

$('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"

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!