JavaScript je velmi oblíbený jazyk, který nemá tak striktní pravidla jako ostatní programovací jazyky. Klíčové slovo this patří mezi vývojáři mezi jeho nejvíce nepochopené koncepty. Po tomto článku vám už this vrásky dělat nebude.

Hodnota this je závislá na tom, kde ho voláme. JavaScript spustí každý kód v nějakém kontextu objektu, do kterého metoda patří. Když tedy v metodě zavoláme this, budeme se odkazovat na kontext, ze kterého byl kód spuštěn. Kontext this může být globální (odkazuje na globální objekt, který se provádí v rámci celé aplikace, případně je součástí funkce nebo metody. Pojďme se podívat na příklady.

this v globálním kontextu

console.log(this)

// odkáže nás na globální objekt window

this v kontextu funkce

function helloWorld() {
   console.log(this);
}

helloWorld();

//this bude odkazovat na globální objekt window

Pokud ale voláme funkci, která je součástí jiného objektu, pak this nás bude odkazovat na daný objekt.

const test = {
   name: 'Fordevs',
   helloWorld() {
      console.log(this);
   }
}

test.helloWorld();

// this odkazuje na objekt test

object1 = {
   foo: function() {
      console.log(this);
   },
   value: 'A',
};

object2 = {
   foo: object1.foo,
   value: 'B',
};

object1.foo();  // this se odkazuje na object1
object2.foo();  // this se odkazuje na object2

Pozor na use strict. V případě, že je hodnota metody primitivní (string, number, bigint, boolean, undefined, symbol, null), tak this bude také primitivní hodnotou. Ale pouze za použití use strict.

function strictFunction() {
   'use strict'; 
   console.log(this);
}

strictFunction();

// vypíše nám undefined

this v arrow functions

Arrow funkce si nebindují svůj vlastní this kontext. Místo toho, this patří ke scopu rodiče, což je nazýváno jako „lexical scoping“. To dělá na jedné straně arrow funkce skvělé, na druhé straně mohou nadělat problémy.

const myFunction = () => {
   console.log(this);
};

myFunction();

// this odkazuje na global object window

const myObject = {
   myMethod: () => {
      console.log(this);
   }
};

myObject.myMethod();

// this bude odkazovat na globální window object

this v kontextu eventu

const button = document.querySelector('button');

button.addEventListener('click', function() {
   console.log(this);
});

// this odkazuje na element, který vyvolal event

Použijeme-li arrow funkci, tak nás bude odkazovat na globální objekt.

const button = document.querySelector('button');

button.addEventListener('click', () => {
   console.log(this);
});

// this odkazuje na window object

this a klíčové slovo new

V JavaScriptu klíčové slovo new vytvoří nový objekt. Uvnitř funkce, je tda this nastaveno na nový objekt. Pojďme se podívat na příklad.

function printName(name) {
   this.name = name;
   
   console.log(this.name);
}

new printName('fordevs');

bindovanie this na vlastní kontext

V JavaScript lze říci this kam chceme, aby ukazoval, a to pomocí bind(). Z vyšších částí článku už víme, že když napíšeme jednoduchou funkci, ve které pouze consol.logujeme this a zavoláme ji z window objektu, tak bude odkazovat na globální object. Je však možné, aby nám this odkazovalo na jiný object.

function myMethod() { 
   console.log(this);
};

const myObject = {};

const myMethodBound = myMethod.bind(myObject);

// this bude odkazovat na object "myObject"

Závěr

This je v JavaScript dvousečná zbraň, pokud mu rozumíte, tak vám umí při programování hodně pomoci. To ale platí i naopak. Pokud nevíte kam směřuje kontext this, tak vám umí nadělat pěkné problémy.

Věřím, že vám je už použití this jasnější, pokud chce zajít ještě více do detailů, tak doporučuji rozsáhlý článek na MDN.