{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/sv\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, jag gjorde det igen: fels\u00f6kning av vanliga fel i JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nIbland kan det vara sv\u00e5rt att skriva JavaScript-kod, och ibland kan det till och med vara skr\u00e4mmande, vilket m\u00e5nga utvecklare k\u00e4nner igen. Under arbetets g\u00e5ng uppst\u00e5r oundvikligen fel, och vissa av dem \u00e5terkommer ofta. I denna artikel, som riktar sig till nyb\u00f6rjare, beskrivs dessa fel och hur man l\u00f6ser dem. F\u00f6r att g\u00f6ra det tydligare har funktionsnamn, egenskaper och objekt h\u00e4mtats fr\u00e5n en popul\u00e4r l\u00e5t<\/a><\/noindex>. Allt detta hj\u00e4lper till att snabbt komma ih\u00e5g hur man r\u00e4ttar till vanliga fel.
\n<\/a><\/noindex><\/p>\n

P\u00e5minnelse:<\/b> f\u00f6r alla l\u00e4sare av \"Habr\" \u2014 10 000 rubel rabatt vid registrering f\u00f6r vilken kurs som helst p\u00e5 Skillbox med rabattkoden \"Habr\".<\/i><\/p>\n

Skillbox rekommenderar:<\/b> Praktisk kurs \u00abMobilutvecklare PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: egenskap \u00e4r inte definierad<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nExemplet ovan ger felet Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Problemet \u00e4r att objektet girl inte har egenskapen named, \u00e4ven om det har egenskapen name. Eftersom egenskapen girl.named inte \u00e4r definierad kan den inte heller n\u00e5s, eftersom den formellt inte existerar. Men om man byter girl.named.lucky till girl.name fungerar allt och programmet kommer att returnera Lucky.<\/p>\n
F\u00f6r mer information om egenskaper kan man l\u00e4sas h\u00e4r<\/a><\/noindex>.<\/p>\n
Metoder f\u00f6r att \u00e5tg\u00e4rda TypeError-fel<\/h3>\n
\nTypeError-fel uppst\u00e5r n\u00e4r en programmerare f\u00f6rs\u00f6ker utf\u00f6ra \u00e5tg\u00e4rder med data som inte motsvarar en viss typ. Ett exempel kan vara att anv\u00e4nda .bold(), beg\u00e4ra en egenskap som \u00e4r undefined eller att kalla en funktion som inte faktiskt \u00e4r en funktion.<\/p>\n
Om man f\u00f6rs\u00f6ker kalla girl (), kommer det att uppst\u00e5 felet Uncaught TypeError: yourVariable.bold is not a function och girl is not a function, eftersom det verkligen \u00e4r ett objekt som anropas, inte en funktion.<\/p>\n
F\u00f6r att \u00e5tg\u00e4rda fel m\u00e5ste man studera variablerna. S\u00e5 vad \u00e4r girl? Och vad \u00e4r girl.named? Detta kan man ta reda p\u00e5 genom att analysera koden, skriva ut variabler med hj\u00e4lp av console.log med kommandot debugger eller anropa variabelns namn i konsolen. Man beh\u00f6ver s\u00e4kerst\u00e4lla att man kan arbeta med datatypen som finns i variabeln. Om den inte passar, \u00e4ndra den, till exempel genom att l\u00e4gga till ett villkor eller en try..catch-block \u2014 och f\u00e5 kontroll \u00f6ver operationens utf\u00f6rande.<\/p>\n
Stack overflow<\/h3>\n
\nOm man ska tro p\u00e5 artisterna bakom l\u00e5ten Baby One More Time (det \u00e4r Britney Spears, ja), s\u00e5 betyder ordet hit i detta sammanhang ett \u00f6nskem\u00e5l fr\u00e5n s\u00e5ngerskan att bli uppringd igen (h\u00e4r \u00e4r en f\u00f6rklaring av sj\u00e4lva l\u00e5tens kontext, \u2014 anm. \u00f6vers\u00e4ttaren). Det kan mycket v\u00e4l h\u00e4nda att detta \u00f6nskem\u00e5l leder till en \u00f6kning av samtalen i verkliga livet. Men inom programmering \u00e4r det rekursion, vilket kan orsaka ett fel vid stack\u00f6verfl\u00f6d.<\/p>\n
Fel ser ut p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nStack\u00f6verfl\u00f6det sker om utvecklaren inte har beaktat basfallet i rekursionen eller om koden inte hanterar det f\u00f6rutsebara fallet.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nI detta fall kan stillBelieve aldrig f\u00e5 v\u00e4rdet false, s\u00e5 varje g\u00e5ng kommer oneMoreTime att anropas, men funktionen kommer aldrig att avslutas.<\/p>\n
Om man ist\u00e4llet b\u00f6rjar hoppas p\u00e5 tv\u00e5 v\u00e4nner, minskar det loneliness (ensamhet), och samtalet kan v\u00e4nta.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nEtt exempel kan vara fall med o\u00e4ndliga loopar, d\u00e4r systemet inte ger n\u00e5got felmeddelande, utan sidan som k\u00f6r JavaScript-koden helt enkelt fryser. Detta h\u00e4nder om while-loopen saknar ett avslutningsvillkor.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProblemet kan l\u00f6sas p\u00e5 f\u00f6ljande s\u00e4tt:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Debugga o\u00e4ndliga loopar och rekursioner<\/h3>\n
\nOm det uppst\u00e5r ett problem med en o\u00e4ndlig loop, beh\u00f6ver du st\u00e4nga fliken i Chrome eller Edge, och i Firefox \u2014 f\u00f6nstret i webbl\u00e4saren. Efter det m\u00e5ste du noggrant analysera koden. Om problemet inte kan hittas, b\u00f6r du l\u00e4gga till debug-server i loopen eller funktionen och kontrollera variablernas v\u00e4rde. Om resultatet inte motsvarar det f\u00f6rv\u00e4ntade, ers\u00e4tter vi det, och detta kan g\u00f6ras enkelt.<\/p>\n
I exemplet ovan b\u00f6r debuggern l\u00e4ggas till som den f\u00f6rsta raden i en funktion eller loop. D\u00e4refter m\u00e5ste du \u00f6ppna debug-fliken i Chrome och analysera variablerna i omfattningen. Med knappen next kan du sp\u00e5ra deras f\u00f6r\u00e4ndring vid varje iteration. Att g\u00f6ra detta \u00e4r enkelt, och i de flesta fall finns problemet.<\/p>\n
Mer om detta kan l\u00e4sas h\u00e4r (f\u00f6r Chrome<\/a><\/noindex>) och h\u00e4r (f\u00f6r Firefox<\/a><\/noindex>).<\/p>\n
Syntaxfel<\/h3>\n
\nEtt av de vanligaste felen i JavaScript \u00e4r SyntaxError. Att undvika dem kan underl\u00e4ttas genom till\u00e4gg f\u00f6r textredigeraren. Till exempel markerar Bracket Pair Colorizer klamrar i koden med olika f\u00e4rger, och Prettier eller ett liknande analysverktyg ger m\u00f6jlighet att snabbt hitta fel. Det b\u00e4sta s\u00e4ttet att minska risken f\u00f6r SyntaxError \u00e4r att ha minimal inb\u00e4ddning.<\/p>\n
Dela g\u00e4rna i kommentarerna: Vad g\u00f6r ni f\u00f6r att undvika fel eller snabbt uppt\u00e4cka och \u00e5tg\u00e4rda dem?<\/p>\n
Skillbox rekommenderar:<\/b><\/p>\n