Nästa upp på listan över artiklar i vår JavaScript-Felhanteringsserie tittar vi närmare på det odefinierade Variabelfelet. Det odefinierade Variabelfelet kastas när en hänvisning till en variabel eller ett objekt görs i kod som antingen inte existerar eller ligger utanför tillämpningsområdet för den exekverande koden.

nedan tar vi en titt på ett par specifika exempel som vanligtvis ger ett odefinierat Variabelfel, liksom hur man fångar och hanterar detta fel när det visas. Låt oss komma igång!

den tekniska sammanfattningen

• Alla JavaScript-felobjekt är ättlingar till Felobjektet eller ett ärvt objekt däri.
• ReferenceError-objektet ärvs från Felobjektet.
• det odefinierade Variabelfelet är en specifik typ av ReferenceError-objekt.

När ska du använda den?

När djupt i processen med kodning med JavaScript, är det inte så ovanligt att göra ett typsnitt eller helt enkelt glömma att initiera en variabel eller ett objekt innan du ringer nämnda variabel senare ner linjen. När detta inträffar visar JavaScript sitt missnöje genom att kasta ett odefinierat Variabelfel, vilket indikerar att det refererade objektet inte tidigare definierades.

till exempel, här gör vi ett enkelt uttalande om att försöka ta tag i .längd egendom av vår odefinierade objektvariabel. Vi använder också ett enkelt try-catch-block och tar tag i eventuella Referensfel som kan uppstå och skickar dem sedan till en enkel printError-funktion för att försköna utmatningen av våra felmeddelanden:

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

säker nog, som förväntat, märker JavaScript att Objektvariabeln är odefinierad och producerar det uttryckliga odefinierade Variabelfelet:

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

det är värt att notera att till skillnad från många andra JavaScript-fel som vi har täckt i denna serie skiljer sig inte den odefinierade Variabla Felmeddelandetexten mellan de två motorerna som driver Firefox eller Chrome.

den uppenbara och enkla fixen till det här odefinierade Variabelfelet är att helt enkelt deklarera vår objektvariabel innan du ringer den:

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

Nu kommer vi förbi objektet.längd samtal utan att kasta några fel och därmed producera vår konsol.loggutgång av längden på vår artikelsträng:

Length is 3.

tekniskt sett, medan det odefinierade Variabelfelet är avsett att identifiera referenser till odefinierade variabler, spelar det också en roll när man försöker referera variabler som definieras, men ligger utanför det aktuella omfånget där koden körs.

Här har vi till exempel en enkel getFullName-funktion, som definierar två variabler inuti sig själv, förnamn och efternamn. Utanför den funktionens omfattning försöker vi få längdegenskapen för variabeln förnamn:

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

medan förnamnvariabeln redan är tekniskt definierad är den otillgänglig för oss på denna exekveringsnivå, och därmed kastas ett odefinierat Variabelfel:

 ReferenceError: firstName is not defined

i det här fallet handlar upplösning om att dra förnamnet och efternamnvariabeln utanför ramen för getFullNamefunction, så de är inom samma sammanhang av utförande som vårt 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); }}

som förväntat produceras inga fel och vi får längden på förnamn variabeln som utgång:

Length is 3.

för att dyka ännu djupare för att förstå hur dina applikationer hanterar JavaScript-fel, kolla in det revolutionerande Airbrake JavaScript error tracking tool för realtidsvarningar och omedelbar inblick i vad som gick fel med din JavaScript-kod.