This w JavaScript

Dzisiaj przedstawię Ci kolejny ważny temat w JavaScript, z którym problemy często mają początkujący. Mam na myśli używanie słowa kluczowego this w JavaScript. W skrócie można powiedzieć, że w języku JavaScript this jest obiektem, który wykonuje obecną funkcję. Ogólna zasada jest taka, że gdy this używane jest w metodzie to wtedy odnosi się do obiektu nadrzędnego metody, a gdy w funkcji to wtedy wskazuje na obiekt globalny, którym w przeglądarce jest window.

Zobacz to na przykładach:

let course = {
    name: 'Podstawy języka JavaScript',
    price: 21,
    info() {
        console.log(`${this.name}, cena: ${this.price} zł.`);
    }
};
course.info(); //Podstawy języka JavaScript, cena: 21 zł.

Jak widzisz w powyższym przykładzie, za pomocą inicjalizatora obiektu stworzyliśmy obiekt course. Przypomnę Ci, że funkcje w obiektach nazywane są metodami. Jak wspomniałem na początku słowo this w metodzie odwołuje się do obiektu nadrzędnego metody. W każdym miejscu gdzie użyte zostało słowo this, w rzeczywistości w tym przypadku wskazuje na course.

A teraz spróbuj użyć słowa this nie w metodzie, a w funkcji. Możesz to zrobić w taki sposób:

function name() {
    console.log(this);
}
name(); //Window

Jak widzisz na powyższym przykładzie po odwołaniu się do this, otrzymaliśmy informacje o obiekcie globalnym, dla przeglądarki jest to window, a dla node global.

To tyle z podstaw, ale żeby nie było tak łatwo przejdźmy do trochę bardziej skomplikowanych rzeczy. Przyjrzyj się takiemu przykładowi:

let course = {
    name: 'Podstawy języka JavaScript',
    price: 21,
    reviews: ['9', '10' ],
    info() {
        console.log(`${this.name}, cena: ${this.price} zł.`);
    },
    showReviews() {
        this.reviews.forEach(function(rev){
            console.log(this.name, rev);
        });
    }
};
course.showReviews();
//9
//10

Jak widzisz w powyższym przykładzie, mimo że użyliśmy this w metodzie, nie odwołaliśmy się bezpośrednio do obiekt course, a do obiektu window. Dlaczego tak się stało? Ponieważ w ciele metody jest nowa funkcja, a jak wspomniałem Ci na początku funkcje odnoszą się do obiektu window. Oczywiście powyższy "problem", można poprawić na kilka sposobów, ale przedstawię Ci 1 najbardziej popularny, który został wprowadzony w ES6. Pamiętasz jak w 1 z poprzednich wpisów dotyczących funkcji strzałkowych wspominałem Ci o this? O tym, że funkcja strzałkowa zmienia kontekst dla this? Jeżeli w powyższym przykładzie użyjesz funkcji strzałkowej, to zmieni to wartość this na obecny obiekt - wywołujący.

let course = {
    name: 'Podstawy języka JavaScript',
    price: 21,
    reviews: ['9', '10' ],
    info() {
        console.log(`${this.name}, cena: ${this.price} zł.`);
    },
    showReviews() {
        this.reviews.forEach(rev => {
            console.log(this.name, rev);
        });
    }
};
course.showReviews();
//Podstawy języka JavaScript 9
//Podstawy języka JavaScript 10

Jak widzisz teraz this zmieniło kontekst i wskazuje na obiekt wywołujący.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam Cię do kolejnych artykułów z serii podstaw programowania w języku JavaScript.

Poprzedni artykuł - Obsługiwanie wyjątków w JavaScript.
Następny artykuł - Obiekt arguments w JavaScript.

Blog Dla Młodszych Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły