Słowo kluczowe this jest jedną z najbardziej mylących rzeczy, które zmusiły programistów JavaScript do zaczesania włosów do głowy. Moim zdaniem większość programistów interpretuje to słowo kluczowe tak, jak jego zachowanie w innych językach, takich jak Java. Cóż, w JavaScript sposób, w jaki to działa w innych językach, jest jednym z przypadków użycia. W tym poście na blogu przedstawię wszystkie zasady związane z tym słowem kluczowym w JavaScript.

W globalnym kontekście wykonania ta wartość jest równa obiektowi window. To samo dotyczy trybów ścisłych i nieścisłych w JavaScript.

Jednak w kontekście wykonania funkcji wartość tego słowa kluczowego zależy od sposobu wywołania funkcji. W JavaScript funkcję można wywołać na 4 różne sposoby.

Metoda 1: Normalne wywołanie funkcji

W tym scenariuszu ta wartość jest równa obiektowi globalnemu, którym jest okno w przeglądarce, oraz globalnemu w przypadku korzystania z NodeJS .

Natomiast undefined jest logowany do konsoli, jeśli używamy trybu ścisłego. Tryb ścisły jest włączany poprzez umieszczenie dyrektywy "use strict"na początku pliku lub funkcji.

Metoda 2: Wywołanie metody

Gdy wywoływana jest metoda obiektu, jest to równoznaczne z obiektem, który jest właścicielem metody. W poniższym przykładzie ta wartość jest równa obiektowi użytemu do jej wywołania, obj .

Metoda 3: Inwokacja pośrednia

Funkcje w JavaScript są jak obiekty. Są one bardziej szczegółowo nazywane obiektami wywoływanymi . Funkcje mają te dwie metody zdefiniowane w swoim prototypie; zadzwoń i aplikuj . Korzystając z tych metod, możemy ustawić wartość this . Gdy funkcja jest wywoływana przy użyciu metody wywołania i zastosowania , ta wartość jest równa pierwszemu argumentowi dostarczonemu do tych funkcji. W poniższym przykładzie jest to równe obiektowi obj w obu przypadkach.

Metoda 4: Wywołanie konstruktora

Gdy funkcja konstruktora jest wywoływana ze słowem kluczowym new , w takim przypadku ta wartość jest równa nowo utworzonej instancji.

to w funkcjach strzałek

Słowo kluczowe this zachowuje się zupełnie inaczej w funkcjach strzałek niż w zwykłych funkcjach. Funkcje strzałek nie mają własnego kontekstu wykonania. W praktyce jest to dziedziczone z zewnętrznej otaczającej funkcji lub kontekstu. Na przykład,

W powyższym przykładzie jest to dziedziczone z globalnego kontekstu wykonania. Wartość this jest równa obiektowi window w globalnym kontekście wykonania w przeglądarce. Zobaczmy inny przykład.

Jak dotąd ustaliliśmy, że funkcje strzałek nie mają własnego kontekstu wykonania. Zatem w powyższym przykładzie ta wartość jest równa otaczającemu kontekstowi, który jest globalnym kontekstem wykonania. W rezultacie ta wartość jest równa obiektowi okna. Obiekt window nie posiada właściwości name , co prowadzi do niezdefiniowanych danych wyjściowych w powyższym przykładzie.

Naprawianie problemów z wiązaniem

Rozważ ten przykład,

Dlaczego otrzymujemy niezdefiniowane jako wyjście? Okazuje się, że straciliśmy to powiązanie z obiektem obj . Zauważ, że w linii 8. nie wywołujemy funkcji printName . Przechowujemy jego odwołanie w zmiennej, aby użyć go później. Wywołanie funkcji i przechowywanie jej referencji w zmiennej to dwie różne rzeczy. Więc kiedy wywołujemy funkcję w linii 9, otrzymujemy undefined jako wyjście. Ponieważ obiekt nie jest określony, powiązanie this z obiektem obj zostanie utracone. Prowadzi to do zrównania się z obiektem globalnym . Ponieważ nie ma imieniaw obiekcie globalnym otrzymujemy undefined na konsoli.

Jak możemy zachować to powiązanie funkcji printName , tak że wartością this jest zawsze obiekt obj , niezależnie od tego, czy wywołujemy funkcję printName ?

Można to łatwo naprawić za pomocą metody bind w prototypie funkcji. Metoda bind zwraca nową funkcję z tym słowem kluczowym ustawionym na określoną wartość. W przeciwieństwie do metod call i apply , funkcja nie jest wywoływana natychmiast. Dlatego później użyjemy zwróconej funkcji metodą bind .

Metoda bind naprawia to powiązanie funkcji printName z obiektem obj .

Mam nadzieję, że ten post okazał się pomocny. Dziękuje za przeczytanie. :)

Połączmy się:
LinkedIn
Twitter