Als nächstes auf der Liste der Artikel in unserer JavaScript-Fehlerbehandlungsreihe werfen wir einen genaueren Blick auf die undefinierte Variable error. Der undefinierte Variablenfehler wird ausgelöst, wenn ein Verweis auf eine Variable oder ein Objekt in Code erstellt wird, der entweder nicht existiert oder außerhalb des Gültigkeitsbereichs des ausführenden Codes liegt.

Im Folgenden werfen wir einen Blick auf einige spezifische Beispiele, die häufig einen undefinierten Variablenfehler erzeugen, sowie darauf, wie man diesen Fehler abfängt und behandelt, wenn er auftritt. Lass uns anfangen!

Der technische Überblick

• Alle JavaScript-Fehlerobjekte sind Nachkommen des Fehlerobjekts oder eines darin geerbten Objekts.
• Das ReferenceError-Objekt wird vom Error-Objekt geerbt.
• Die undefinierte Variable error ist ein bestimmter Typ von ReferenceError-Objekt.

Wann sollten Sie es verwenden?

Wenn Sie tief in den Prozess der Codierung mit JavaScript, ist es nicht allzu ungewöhnlich, einen Tippfehler zu machen oder einfach vergessen, eine Variable oder ein Objekt zu initialisieren, bevor Sie die Variable später auf der ganzen Linie aufrufen. In diesem Fall zeigt JavaScript sein Missfallen, indem es einen undefinierten Variablenfehler auslöst, der darauf hinweist, dass das referenzierte Objekt zuvor nicht definiert wurde.

Zum Beispiel machen wir hier eine einfache Aussage über den Versuch, die zu greifen .length Eigenschaft unserer undefinierten itemvariable. Wir verwenden auch einen einfachen try-catch-Block und greifen auf eventuell auftretende ReferenceErrors zu, um sie dann an eine einfache printError-Funktion weiterzuleiten, um die Ausgabe unserer Fehlermeldungen zu verschönern:

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); }}

Natürlich bemerkt JavaScript, wie erwartet, dass die item-Variable undefiniert ist, und erzeugt den expliziten undefinierten Variablenfehler:

// FIREFOX ReferenceError: item is not defined// CHROME ReferenceError: item is not defined

Es ist erwähnenswert, dass im Gegensatz zu vielen anderen JavaScript-Fehlern, die wir in dieser Serie behandelt haben, der undefinierte Variable Fehlermeldungstext sich nicht zwischen den beiden Motoren unterscheidet, die Firefox oder Chrome antreiben.

Die offensichtliche und einfache Lösung für diesen speziellen undefinierten Variablenfehler besteht darin, einfach unsere item Variable zu deklarieren, bevor sie aufgerufen wird:

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); }}

Jetzt kommen wir am item vorbei.länge Anruf ohne Fehler zu werfen und damit unsere Konsole produzieren.log-Ausgabe der Länge unseres Item-Strings:

Length is 3.

Technisch gesehen soll der undefinierte Variablenfehler zwar Verweise auf undefinierte Variablen identifizieren, spielt aber auch eine Rolle, wenn versucht wird, auf Variablen zu verweisen, die definiert sind, sich jedoch außerhalb des aktuellen Bereichskontexts befinden, in dem der Code ausgeführt wird.

Hier haben wir zum Beispiel eine einfache getFullName-Funktion, die zwei Variablen in sich definiert, FirstName und LastName . Außerhalb des Gültigkeitsbereichs dieser Funktion versuchen wir, die Eigenschaft length der Variablen FirstName abzurufen:

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); }}

Während die Variable FirstName technisch bereits definiert ist, ist sie für uns auf dieser Ausführungsebene nicht zugänglich, und daher wird ein Fehler mit undefinierten Variablen ausgelöst:

 ReferenceError: firstName is not defined

In diesem Fall geht es darum, die Variablen FirstName und LastName außerhalb des Gültigkeitsbereichs der Funktion getFullNamefunction zu ziehen, sodass sie sich im selben Ausführungskontext befinden wie unsere Funktion try-catch-Block:

// 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); }}

Wie erwartet werden keine Fehler erzeugt und wir erhalten die Länge der FirstName-Variablen als Ausgabe:

Length is 3.

Um noch tiefer in das Verständnis einzutauchen, wie Ihre Anwendungen mit JavaScript-Fehlern umgehen, schauen Sie sich das revolutionäre Airbrake JavaScript Error Tracking Tool an, um Echtzeit-Warnungen und sofortige Einblicke in das zu erhalten, was mit Ihrem JavaScript-Code schief gelaufen ist.