Wstęp

Czy jesteś gotowy, aby wejść do zabawnego świata JavaScript i poznać sekretną moc słowa kluczowego „this”? Przygotuj się na niesamowitą podróż po ciekawej krainie „tego”, w której odkryjesz przyczyny jego działania i zdasz sobie sprawę z pełnej mocy swojego kodu. Dzięki wciągającym przykładom i krystalicznie przejrzystym objaśnieniom ten przewodnik zabierze Cię w ekscytującą podróż przez różne powiązania „tego”. Do czasu zakończenia tej podróży będziesz przygotowany do radzenia sobie z wszelkimi trudnościami w kodowaniu, a także będziesz mieć pewność siebie, aby tworzyć solidne i skalowalne systemy. Więc bez zbędnych ceregieli, załóż buty z kodem i ruszajmy w podróż przez niezbadane terytoria słowa kluczowego „this”!

Słowo kluczowe „this” w JavaScript odnosi się do obiektu, którego metodą jest bieżąca funkcja. Jest to zmienna o dynamicznym zasięgu, co oznacza, że ​​jej zakres zmienia się w zależności od kontekstu wywołania funkcji w czasie wykonywania. „to” jest kluczową i często źle rozumianą koncepcją w JavaScript, ponieważ znaczenie może się znacznie różnić w zależności od kontekstu, w którym jest używane.

Powiązania „tego”

Słowo kluczowe „this” ma cztery główne wiązania w JavaScript: domyślne wiązanie, niejawne wiązanie, jawne wiązanie i nowe wiązanie. Zrozumienie tych powiązań jest niezbędne do efektywnego wykorzystania słowa kluczowego „this” w JavaScript, ponieważ każde z nich określa, w jaki sposób „to” powinno być używane w określonym kontekście.

1. Domyślne wiązanie

Kiedy termin „to” jest używany poza funkcją lub w zasięgu globalnym w JavaScript, jest domyślnie związany. W tym przypadku „to” odnosi się do obiektu globalnego, którym jest albo „okno” w przeglądarce, albo „global” w Node.js.

Oto przykład domyślnego wiązania w akcji:

Jak widać z pierwszej instrukcji console.log, słowo kluczowe „this” w powyższym przykładzie odnosi się do obiektu globalnego, jeśli jest używany poza jakąkolwiek funkcją. Drugie zdanie w pliku console.log pokazuje, że użycie go wewnątrz funkcji logThis odnosi się również do obiektu globalnego.

Należy pamiętać, że w trybie ścisłym obiekt globalny jest niezdefiniowany, a nie wartość „tego” w zasięgu globalnym. Możesz włączyć tryb ścisły, dodając „użyj ścisłego” na początku kodu lub wewnątrz funkcji, jak pokazano poniżej.

2. Niejawne wiązanie

Słowo kluczowe „this” w tym powiązaniu odnosi się do obiektu, którego właściwością jest funkcja. „to” określa obiekt, gdy funkcja jest używana jako metoda obiektu. Obiekt, którego właściwość jest funkcją, określa wartość „tego”.

Weź na przykład,

Funkcja „ pozdrawiam ” jest atrybutem obiektu „ osoba ” w powyższym przykładzie. Dostęp do właściwości nazwy obiektu „ person ” możemy uzyskać , wywołując person.greet(), która ustawia wartość this w ramach metody powitania na obiekt osoby. W tej sytuacji widać niejawne wiązanie. Ilustruje to niejawne wiązanie.

Spójrzmy na inny przykład:

W tym przykładzie obiekt „ instruktor ” ma właściwość „ sayName ” ustawioną jako właściwość, a po wywołaniu metody „instruktor” obiekt „ instruktor ” jest ustawiany jako wartość „ tego ” w funkcji „ sayName ”. . To kolejny przykład niejawnego wiązania.

3. Jawne wiązanie

Bez względu na to, jak i gdzie funkcja jest wywoływana w kodzie, możesz jawnie ustawić wartość „ this ” dla wywołania przy użyciu jawnej metody wiązania.

W JavaScript istnieją trzy metody jawnego wiązania: „ call ”, „ apply ” i „ bind ”.

Możesz wywołać funkcję za pomocą metody „ call ”, a także możesz ustawić wartość „ to ” dla tego wywołania funkcji. Wartość, którą chcesz ustawić dla „ this ” jest pierwszym argumentem metody wywołania, a pozostałe argumenty są wysyłane do funkcji indywidualnie.

Weź na przykład:

Metoda „ call ” została użyta w powyższym przykładzie do wywołania funkcji „ sayName ”, a wartość „ this ” jest ustawiona na obiekt instruktora.

Metoda „ apply ” jest podobna do „ call ” z tą różnicą, że akceptuje raczej tablicę argumentów niż pojedyncze argumenty.

Spójrzmy na przykład:

W powyższym przykładzie do wywołania funkcji użyto metody „ applysayName ” i przypisania wartości „ this ” do obiektu „ instruktor ”. Argumenty funkcji są przekazywane jako tablica.

Metoda „ bind ” tworzy nową funkcję, używając pierwszego argumentu przekazanego do „bind” jako wartości „to”. Argument podany do „bind” jest ustawiany jako wartość „this” w oryginalnej funkcji, gdy później wywoływana jest nowa funkcja.

Oto przykład poniżej:

W powyższym przykładzie metoda „ bind ” została użyta do utworzenia nowej funkcji „ instruktorSayName ” przy użyciu „ tego ” ustawionego na obiekt „ instruktor ”. Gdy później wywołano funkcję „ instruktorSayName ”, wartość „ tego ” w funkcji „ sayName ” została ustawiona na obiekt „ instruktor ”, tak jakbyśmy użyli „ zadzwoń ” lub „ zastosuj ”.

4. Nowe wiązanie

Proces, w którym słowo kluczowe „ this ” jest wiązane z nowo skonstruowanym obiektem, gdy funkcja jest wywoływana z operatorem „ new ”, jest nazywany wiązaniem „ new ”.

Kiedy funkcja jest wywoływana z operatorem „ new ”, tworzony jest nowy obiekt, a słowo kluczowe „ this ” w funkcji jest ustawiane na ten nowo utworzony obiekt. Dodatkowo prototyp nowo utworzonego obiektu jest ustawiany na właściwość prototype funkcji.

Weź na przykład:

W powyższym przykładzie nowy obiekt jest tworzony za pomocą operatora „ new ” w celu wywołania funkcji „ Osoba ”. Właściwości „ name ” i „ greet ” są dodawane do obiektu, a słowo kluczowe „ this” w funkcji „ Osoba ” jest ustawiane na nowo wygenerowany obiekt.

Należy pamiętać, że nowo utworzony obiekt jest zwracany bez konieczności użycia instrukcji „return”, gdy funkcja jest wywoływana przy użyciu operatora „new”. Jeśli użyta zostanie instrukcja „return” i zwróci obiekt, obiekt ten zostanie zwrócony zamiast nowo utworzonego obiektu. Jeśli używana jest instrukcja „return” i zwraca ona wartość niebędącą obiektem, nowo utworzony obiekt i tak zostanie zwrócony.

Funkcja strzałki i „to”

Funkcje strzałek JavaScript zapewniają skrót do pisania funkcji anonimowych (funkcji bez nazwy). Sposób, w jaki wiążą słowo kluczowe „this”, odróżnia je od konwencjonalnych wyrażeń funkcyjnych.

Wartość „to” w konwencjonalnych wyrażeniach funkcyjnych zależy od sposobu wywołania funkcji. Jak wyjaśniono wcześniej, można ją ustawić jawnie za pomocą poleceń „call”, „apply” lub „bind” lub ustawić niejawnie, w zależności od obiektu zawierającego tę funkcję.

Jednak w funkcjach strzałkowych kontekst, w którym funkcja strzałkowa została wygenerowana, a nie sposób jej wywołania, określa wartość „tego”. Oznacza to, że jeśli funkcja strzałkowa nie znajduje się wewnątrz innej funkcji, słowo kluczowe „this” wewnątrz funkcji strzałkowej zawsze będzie odnosić się do wartości „this” funkcji zewnętrznej lub obiektu globalnego.

Mówiąc najprościej, funkcje strzałek nie mają swojej własnej wartości „to”; zamiast tego dziedziczą wartość „this” z otaczającego zakresu.

Na przykład:

Oto kolejny przykład funkcji strzałki, która odwołuje się do słowa kluczowego „this” funkcji zewnętrznej:

W powyższym przykładzie funkcja „ pozdrawiaj ” w tym przykładzie została zdefiniowana jako funkcja strzałki wewnątrz funkcji „ Osoba ”. Wartość „ this ” w funkcji strzałki odpowiadała wartości „ this ” funkcji „Person”, która została przypisana do nowo wygenerowanego obiektu „ elie ”, gdy wywołano funkcję „ witaj ”.

Należy wspomnieć, że użycie „call”, „apply” lub „bind” nie może zmienić wiązania „this” w funkcjach strzałek. Niezależnie od metody użytej do wywołania funkcji wartość „to” w funkcji strzałki pozostaje taka sama. To sprawia, że ​​funkcje strzałek są szczególnie przydatne w przypadku wywołań zwrotnych i procedur obsługi zdarzeń, w których wartość „to” często zmienia się nieoczekiwanie.

Wniosek

Podsumowując, nauczenie się słowa kluczowego „this” języka JavaScript jest kluczowym krokiem na drodze do stania się prawdziwym ekspertem JavaScript. Ta podstawowa, ale często kłopotliwa koncepcja może stworzyć lub zepsuć Twój kod i jest kluczem do pełnego wykorzystania możliwości języka. Będziesz w stanie pisać kod, który jest nie tylko wydajniejszy, ale także bardziej elegancki i dynamiczny, jeśli dogłębnie zrozumiesz domyślne wiązanie, niejawne wiązanie, jawne wiązanie i nowe wiązanie, które są czterema podstawowymi wiązaniami „tego” . Możliwość tworzenia elastycznego, adaptacyjnego i skalowalnego kodu, który może rosnąć i ewoluować wraz ze zmianami projektów i wymagań, pozwoli Ci podjąć każde wyzwanie, które stanie na Twojej drodze. Wykorzystaj więc słowo kluczowe „this”, opanuj je i zostań prawdziwym ninja JavaScript!