Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską.

Hoisting to mechanizm JavaScript, który umożliwia dostęp do zmiennych i funkcji przed ich zainicjowaniem. Podniesienie takiej deklaracji skutecznie przenosi ją na szczyt zakresu.

Dowiedz się wszystkiego o tym, jak hoisting działa w JavaScript i jak najlepiej nim zarządzać, aby uniknąć błędów w kodzie.

Wyciąganie zmiennych Z var, let i const

Hoisting jest możliwy, ponieważ JavaScript używa systemu kompilacji JIT (Just-in-Time), który skanuje Twój kod, aby zidentyfikować wszystkie zmienne w odpowiednich zakresach.

Następnie kompilator JIT podnosi wszystkie wystąpienia deklaracji zmiennych na górę ich zakresu podczas kompilacji. JavaScript podnosi tylko deklaracje zmiennych, a nie ich inicjalizacje.

Zachowanie zmiennych po podniesieniu zależy od słowa kluczowego, za pomocą którego je deklarujesz, ponieważ każde słowo kluczowe zachowuje się inaczej.

rozm

Dostęp do niezainicjowanej zmiennej zadeklarowanej za pomocą

rozm słowo kluczowe powróci nieokreślony. Na przykład:

konsola.log (foo); // nieokreślony
rozm foo = 2;

Powyższe logi kodu nieokreślony bo dzwoni log konsoli zanim zainicjuje zmienną.

Kompilator JavaScript wyświetla poprzedni blok kodu w następujący sposób:

rozm bla;
konsola.log (foo); // nieokreślony
foo = 2;

Podczas podnoszenia, zmienne przestrzegają zasady scopingu w JavaScript. JavaScript podniesie zmienną tylko na górę zakresu, w którym ją zadeklarowałeś. Próba zarejestrowania wartości zmiennej poza jej zadeklarowanym zakresem spowoduje błąd Błąd odniesienia. Na przykład, jeśli zadeklarujesz zmienną wewnątrz funkcji, nie będzie ona widoczna poza tym zakresem:

funkcjonowaćmojaFunkcja() {
konsola.log (foo); // nieokreślony
rozm foo = 10;
}
mojaFunkcja();
konsola.log (foo); // Błąd odniesienia: foo nie jest zdefiniowany

Próba uzyskania dostępu do zmiennej poza jej zakresem spowoduje błąd Błąd odniesienia.

niech i konst

Według MDN dokumentacja dot pozwalać I konst podnoszenie, JavaScript podnosi również zmienne zadeklarowane za pomocą pozwalać I konst słowa kluczowe. Jednak w przeciwieństwie do zmiennych zadeklarowanych za pomocą rozm słowo kluczowe, nie są one inicjowane przez an nieokreślony wartość.

Na przykład:

funkcjonowaćmojaFunkcja() {
konsola.log (foo); // nieokreślony
konsola.log (pasek); // Błąd odniesienia: Nie można uzyskać dostępu do „paska” przed inicjalizacją
konsola.log (baz); // Błąd odniesienia: Nie można uzyskać dostępu do „baz” przed inicjalizacją
rozm foo = 5;
pozwalać słupek = 10;
konst baza = 15;
}
mojaFunkcja();

Nie można uzyskać dostępu do zmiennych zadeklarowanych za pomocą słów kluczowych let i const przed zainicjowaniem ich wartością.

Funkcje podnoszenia

Podnośniki JavaScript działają podobnie do zmiennych. Podobnie jak w przypadku zmiennych, wszystko zależy od tego, jak je zadeklarujesz. Na przykład JavaScript podnosi deklaracje funkcji inaczej niż wyrażenia funkcyjne.

Deklaracja funkcji to funkcja zadeklarowana z nazwą, natomiast wyrażenie funkcji to funkcja, której nazwę można pominąć. Na przykład:

funkcjonowaćbla() {
// deklaracja funkcji
}
konst słupek = () => {
// wyrażenie funkcji
}

JavaScript podnosi deklaracje funkcji, ale nie wyrażenia funkcji. Na przykład:

bla(); // 5
bar(); // TypeError: bar() nie jest funkcją
// Deklaracja funkcji
funkcjonowaćbla() {
konsola.dziennik(5);
}
// Wyrażenie funkcji
rozm słupek = funkcjonowaćwyrażenie() {
konsola.dziennik(10);
};

Ten kod wzywa bla przed zadeklarowaniem i zainicjowaniem go jako funkcji, ale nadal się rejestruje 5 do konsoli. Jednak próbuje zadzwonić bar skutkuje a Błąd typu.

Zarządzanie podnoszeniem

Świadomość podnoszenia i potencjalnych błędów, które mogą wystąpić w przypadku niewłaściwego zarządzania, może zaoszczędzić wiele godzin debugowania. Oto kilka sposobów zarządzania podnoszeniem.

Deklarowanie zmiennych wewnątrz funkcji

Deklaruj zmienne wewnątrz funkcji, które będą miały do ​​nich dostęp. Nie zawsze będziesz w stanie to zrobić, ponieważ możesz potrzebować zmiennej globalnej, do której możesz uzyskać dostęp w ramach wielu funkcji. Upewnij się więc, że globalnie deklarujesz zmienne tylko wtedy, gdy naprawdę tego potrzebujesz.

Deklarowanie zmiennych za pomocą let lub const

Zawsze powinieneś używać let i Cnast słowa kluczowe zamiast rozm słowo kluczowe podczas deklarowania zmiennych. Ta praktyka jest korzystna podczas deklarowania zmiennych lokalnych wewnątrz funkcji. Znając właściwe sposoby deklarować zmienne w JavaScript zmniejsza prawdopodobieństwo wystąpienia błędów spowodowanych podnoszeniem występującym w kodzie.

Deklaruj zmienne na szczycie ich zakresu

Zadeklaruj wszystkie swoje zmienne na górze ich odpowiednich zakresów, przed jakimikolwiek innymi instrukcjami. Dzięki temu kompilator JavaScript nie będzie musiał podnosić tych zmiennych, aby uzyskać do nich dostęp.

Korzystanie z trybu ścisłego

Tryb ścisły to tryb JavaScript który reguluje słabą składnię, optymalizuje czas wykonywania kodu i zabrania nadużywania luźno wpisywanych składni JavaScript przez zgłaszanie błędów w czasie kompilacji.

Na przykład w „trybie niechlujstwa” z powodu hoistingu można uzyskać dostęp do zmiennej poza zainicjowaną funkcją, nawet jeśli nie została ona zadeklarowana:

mojaFunkcja();
konsola.log (foo); // 20
funkcjonowaćmojaFunkcja() {
 foo = 20; 
}

W powyższym bloku kodu JavaScript automatycznie deklaruje bla i podnosi go na szczyt zasięgu globalnego, ignorując zakres, w którym go zainicjowałeś.

Możesz użyć trybu ścisłego, aby naprawić to zachowanie i zgłosić błąd, jeśli spróbujesz uzyskać dostęp do zmiennej poza jej zakresem funkcji.

Tryb ścisły nie zatrzymuje całkowicie podnoszenia. Zamiast tego zapobiega najbardziej mylącym i podatnym na błędy formom podnoszenia. Nadal ważne jest zrozumienie ogólnej koncepcji i zasad podnoszenia, nawet w przypadku korzystania z siatki bezpieczeństwa w trybie ścisłym.

Aby włączyć tryb ścisły na poziomie globalnym, zadeklaruj składnię u góry pliku skryptu:

"używaćścisły"; // Lub 'używaćścisły'

Aby włączyć tryb ścisły na poziomie funkcji, zadeklaruj składnię na górze treści funkcji przed jakimikolwiek instrukcjami:

funkcjonowaćmojaŚcisłaFunkcja() {
 "używaćścisły";
}

Jeśli zadeklarujesz tryb ścisły na poziomie funkcji, ustawienie będzie dotyczyć tylko instrukcji wewnątrz tej funkcji.

Deklarowanie trybu ścisłego na poziomie globalnym zapobiega dostępowi do zmiennych poza ich odpowiednimi zakresami:

"używaćścisły";
mojaFunkcja();
konsola.log (foo); // Błąd odniesienia: foo nie jest zdefiniowany
funkcjonowaćmojaFunkcja() {
 foo = 20; 
}

Po włączeniu trybu ścisłego kompilator JavaScript zostanie uruchomiony mojaFunkcja() na początek zakresu bez niezadeklarowanej zmiennej.

Zrozum, co wpływa na podnoszenie

Podnoszenie jest dość unikalne dla JavaScript i może być bardzo mylącym zachowaniem. Może wpływać na zmienne i funkcje, ale istnieją sposoby, aby temu zapobiec, jeśli zajdzie taka potrzeba.

Na podnoszenie może mieć wpływ kilka czynników, dlatego najlepiej jest unikać występowania w kodzie podnoszenia zmiennych lub funkcji.