Obsługa błędów JavaScript-ReferenceError: „x” is not defined
następnie na liście artykułów z naszej serii obsługi błędów JavaScript przyjrzymy się bliżej Nieokreślonemu błędowi zmiennej. Undefined variable error jest generowany, gdy Referencja do zmiennej lub obiektu jest wykonana w kodzie, który albo nie istnieje, albo znajduje się poza zakresem kodu wykonującego.
poniżej przyjrzymy się kilku konkretnym przykładom, które zwykle powodują niezdefiniowany błąd zmiennej, a także Jak złapać i poradzić sobie z tym błędem, gdy się pojawi. Zaczynajmy!
przegląd techniczny
- wszystkie obiekty błędów JavaScript są potomkami obiektu błędu lub odziedziczonego w nim obiektu.
- obiekt ReferenceError jest dziedziczony z obiektu błędu.
- niezdefiniowany błąd zmiennej jest specyficznym typem obiektu ReferenceError.
kiedy należy go używać?
Kiedy w głębi procesu kodowania z JavaScript, to nie jest wszystko, co niesłychane, aby zrobić literówkę lub po prostu zapomnieć o inicjalizacji zmiennej lub obiektu przed wywołaniem tej zmiennej później w dół linii. Gdy to nastąpi, JavaScript pokaże swoje niezadowolenie, rzucając niezdefiniowany błąd zmiennej, wskazując, że odwołujący się obiekt nie został wcześniej zdefiniowany.
na przykład, tutaj robimy proste oświadczenie o próbie chwycenia .właściwość length naszego niezdefiniowanego elementu zmienna. Używamy również prostego bloku try-catch i przechwytujemy wszelkie ReferenceErrors, które mogą wystąpić, a następnie przekazujemy je do prostej funkcji printError, aby upiększyć wyjście naszych komunikatów o błędach:
var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Calling an undefined `item `variable var length = item.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}
oczywiście, zgodnie z oczekiwaniami, JavaScript zauważa, że zmienna item jest niezdefiniowana i powoduje jawny niezdefiniowany błąd zmiennej:
// FIREFOX ReferenceError: item is not defined// CHROME ReferenceError: item is not defined
warto zauważyć, że w przeciwieństwie do wielu innych błędów JavaScript, które omówiliśmy w tej serii, niezdefiniowany Tekst komunikatu o błędzie zmiennej nie różni się między dwoma silnikami zasilającymi Firefoksa lub Chrome.
oczywistą i prostą poprawką tego konkretnego błędu niezdefiniowanej zmiennej jest po prostu zadeklarowanie naszej zmiennej elementu przed jej wywołaniem:
var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Defining `item` first var item = "Bob"; var length = item.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}
teraz przechodzimy obok elementu.długość połączenia bez rzucania żadnych błędów, a tym samym produkować naszą konsolę.wyjście logu długości naszego łańcucha pozycji:
Length is 3.
technicznie, podczas gdy Undefined variable error ma na celu identyfikację odwołań do niezdefiniowanych zmiennych, odgrywa również rolę podczas próby odwołania się do zmiennych, które są zdefiniowane, ale znajdują się poza bieżącym kontekstem zakresu, w którym kod jest wykonywany.
na przykład, mamy tutaj prostą funkcję getFullName, która definiuje dwie zmienne wewnątrz siebie, firstName i lastName. Poza zakresem tej funkcji, staramy się uzyskać Właściwość length zmiennej firstName:
var getFullName = function() { var firstName = "Bob"; var lastName = "Smith"; return `${firstName} ${lastName}`;}var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Accessing `firstName` from outside its scope var length = firstName.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}
podczas gdy zmienna firstName jest już technicznie zdefiniowana, jest ona dla nas niedostępna na tym poziomie wykonania, a zatem generowany jest niezdefiniowany błąd zmiennej:
ReferenceError: firstName is not defined
w tym przypadku, rozdzielczość jest kwestią wyciągnięcia zmiennej firstName i lastName poza zakres funkcji getFullNamefunction, więc znajdują się one w ten sam kontekst wykonania jak nasz blok try-catch:
// 4// Declaring the variables outside our functionvar firstName = "Bob";var lastName = "Smith";var getFullName = function() { return `${firstName} ${lastName}`;}var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Accessing `firstName` is now allowed var length = firstName.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}
zgodnie z oczekiwaniami, nie powstają żadne błędy i otrzymujemy długość zmiennej firstname jako wyjście:
Length is 3.
aby jeszcze głębiej zrozumieć, w jaki sposób aplikacje radzą sobie z błędami JavaScript, zapoznaj się z rewolucyjnym narzędziem Airbrake do śledzenia błędów JavaScript, aby uzyskać powiadomienia w czasie rzeczywistym i natychmiastowy wgląd w to, co poszło nie tak z kodem JavaScript.