logo

Chyby JavaScriptu a jak je opravit

JavaScript může být noční můrou pro ladění:Některé chyby, které poskytuje, může být zpočátku velmi obtížné pochopit a uvedená čísla řádků také nejsou vždy užitečná. Nebylo by užitečné mít seznam, kde byste se mohli podívat, abyste zjistili, co znamenají a jak je opravit? Tady to je!

Níže je uveden seznam podivných chyb v JavaScriptu. Různé prohlížeče vám mohou poskytnout různé zprávy pro stejnou chybu, takže tam, kde je to možné, existuje několik různých příkladů.

Jak číst chyby?

Před seznamem se rychle podívejme na strukturu chybové zprávy. Pochopení struktury pomáhá porozumět chybám a budete mít méně problémů, pokud narazíte na chyby, které zde nejsou uvedeny.

Typická chyba Chromu vypadá takto:

Uncaught TypeError: undefined is not a function

Struktura chyby je následující:

  1. Nezachycená chyba typu :Tato část zprávy obvykle není příliš užitečná. Uncaught znamená, že chyba nebyla zachycena v catch a TypeError je název chyby.
  2. undefined není funkce :Toto je část zprávy. S chybovými zprávami je musíte číst velmi doslovně. Například v tomto případě to doslova znamená, že kód se pokusil použít undefined jako by to byla funkce.

Jiné prohlížeče založené na webových sadách, jako je Safari, poskytují chyby v podobném formátu jako Chrome. Chyby z Firefoxu jsou podobné, ale ne vždy zahrnují první část, a nejnovější verze Internet Exploreru také poskytují jednodušší chyby než Chrome – ale v tomto případě jednodušší neznamená vždy lepší.

Nyní ke skutečným chybám.

Uncaught TypeError:undefined není funkce

Související chyby: číslo není funkce, objekt není funkce, řetězec není funkce, Neošetřená chyba:‚foo‘ není funkce, očekávaná funkce

Vyskytuje se při pokusu o volání hodnoty jako funkce, kde hodnota není funkcí. Například:

var foo = undefined;
foo();

K této chybě obvykle dochází, pokud se pokoušíte volat funkci v objektu, ale zadali jste název špatně.

var x = document.getElementByID('foo');

Protože vlastnosti objektu, které neexistují, jsou undefined ve výchozím nastavení by výše uvedené způsobovalo tuto chybu.

Další varianty jako „číslo není funkce“ se vyskytují při pokusu o volání na číslo, jako by to byla funkce.

Jak tuto chybu opravit: Ujistěte se, že název funkce je správný. Při této chybě bude číslo řádku obvykle ukazovat na správné místo.

Uncaught ReferenceError:Neplatná levá strana úkolu

Související chyby: Nezachycená výjimka:ReferenceError:Nelze přiřadit k ‚functionCall()‘, Nezachycená výjimka:ReferenceError:Nelze přiřadit k ‚tomu‘

Způsobeno pokusem o přiřazení hodnoty něčemu, co nelze přiřadit.

Nejběžnějším příkladem této chyby jsou klauzule if:

if(doSomething() = 'somevalue')

V tomto příkladu programátor omylem použil jeden rovná se místo dvou. Zpráva „levá strana v úkolu“ odkazuje na část na levé straně znaménka rovná se, takže jak můžete vidět ve výše uvedeném příkladu, levá strana obsahuje něco, k čemu nemůžete přiřadit, což vede k chyba.

Jak tuto chybu opravit: Ujistěte se, že se nepokoušíte přiřadit hodnoty výsledkům funkce nebo this klíčové slovo.

Uncaught TypeError:Převod kruhové struktury na JSON

Související chyby: Nezachycená výjimka:TypeError:JSON.stringify:Není acyklický objekt, TypeError:hodnota cyklického objektu, Kruhový odkaz v argumentu hodnoty není podporován

Vždy způsobeno kruhovým odkazem v objektu, který je pak předán do JSON.stringify .

var a = { };
var b = { a: a };
a.b = b;
JSON.stringify(a);

Protože obě a a b ve výše uvedeném příkladu mají na sebe odkaz, výsledný objekt nelze převést na JSON.

Jak tuto chybu opravit: Odstraňte kruhové odkazy jako v příkladu ze všech objektů, které chcete převést na JSON.

Neočekávaný token;

Související chyby: Očekáváno ), chybí ) za seznamem argumentů

Překladač JavaScriptu něco očekával, ale nebylo to tam. Obvykle je způsobeno nesprávnými závorkami nebo závorkami.

Token v této chybě se může lišit – může obsahovat „Neočekávaný token ]“ nebo „Očekávaný {“ atd.

Jak tuto chybu opravit: Někdy číslo řádku s touto chybou neukazuje na správné místo, takže je obtížné jej opravit.

  • Chyba s [ ] { } ( ) je obvykle způsobena neodpovídajícím párem. Zkontrolujte, zda všechny vaše závorky a závorky mají shodný pár. V tomto případě bude číslo řádku často ukazovat na něco jiného než na problémový znak
  • Neočekávané / souvisí s regulárními výrazy. Číslo řádku bude obvykle správné.
  • Neočekávané; je obvykle způsobena tím, že má; uvnitř objektu nebo literálu pole nebo v seznamu argumentů volání funkce. Číslo řádku bude obvykle správné i pro tento případ

Uncaught SyntaxError:Neočekávaný token NELEGÁLNÍ

Související chyby: Unterminated String Literal, Invalid Line Terminator

U řetězcového literálu chybí závěrečná uvozovka.

Jak tuto chybu opravit: Ujistěte se, že všechny řetězce mají správnou koncovou uvozovku.

Uncaught TypeError:Nelze přečíst vlastnost ‚foo‘ z null, Uncaught TypeError:Nelze přečíst vlastnost ‚foo‘ z undefined

Související chyby: TypeError:someVal je null, Nelze získat vlastnost „foo“ nedefinovaného nebo nulového odkazu

Pokus o čtení null nebo undefined jako by to byl předmět. Například:

var someVal = null;
console.log(someVal.foo);

Jak tuto chybu opravit: Obvykle způsobeno překlepy. Zkontrolujte, zda jsou proměnné použité poblíž čísla řádku, na který ukazuje chyba, správně pojmenovány.

Uncaught TypeError:Nelze nastavit vlastnost ‚foo‘ z null, Uncaught TypeError:Nelze nastavit vlastnost ‚foo‘ z undefined

Související chyby: TypeError:someVal is undefined, Nelze nastavit vlastnost ‘foo’ of undefined or null reference

Pokus o zápis null nebo undefined jako by to byl předmět. Například:

var someVal = null;
someVal.foo = 1;

Jak tuto chybu opravit: I to je obvykle způsobeno překlepy. Zkontrolujte názvy proměnných poblíž řádku, na který chyba ukazuje.

Chyba nezachyceného rozsahu:Překročena maximální velikost zásobníku volání

Související chyby: Nezachycená výjimka:RangeError:Překročena maximální hloubka rekurze, příliš mnoho rekurze, přetečení zásobníku

Obvykle způsobeno chybou v logice programu, která způsobuje nekonečné rekurzivní volání funkcí.

Jak tuto chybu opravit: Zkontrolujte, zda rekurzivní funkce neobsahují chyby, které by mohly způsobit, že se budou neustále opakovat.

Nezachycená chyba URIE:URI je nesprávně vytvořen

Související chyby: URIError:chybně vytvořená sekvence URI

Způsobeno neplatným voláním decodeURIComponent.

Jak tuto chybu opravit: Zkontrolujte, zda je decodeURIComponent volání na chybové číslo linky dostane správný vstup.

XMLHttpRequest nemůže načíst http://some/url/. V požadovaném zdroji není přítomna žádná hlavička ‚Access-Control-Allow-Origin‘

Související chyby: Cross-Origin Request Blocked:Stejné zásady původu zakazují čtení vzdáleného zdroje na http://some/url/

Tato chyba je vždy způsobena použitím XMLHttpRequest.

Jak tuto chybu opravit: Ujistěte se, že adresa URL požadavku je správná a že respektuje zásady stejného původu. Dobrým způsobem, jak najít problematický kód, je podívat se na adresu URL v chybové zprávě a najít ji ve svém kódu.

InvalidStateError:Byl učiněn pokus použít objekt, který není nebo již není použitelný

Související chyby: InvalidStateError, kód výjimky DOME 11

Znamená kód nazývaný funkce, kterou byste v aktuálním stavu neměli volat. Vyskytuje se obvykle s XMLHttpRequest , když se na něm pokoušíte volat funkce, než bude připraven.

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');

V tomto případě byste dostali chybu, protože setRequestHeader funkci lze volat pouze po zavolání xhr.open .

Jak tuto chybu opravit: Podívejte se na kód na řádku označeném chybou a ujistěte se, že běží ve správný čas, nebo před něj přidejte potřebná volání (např. xhr.open )

Závěr

JavaScript obsahuje některé z nejneužitečnějších chyb, které jsem viděl, s výjimkou notoricky známého Expected T_PAAMAYIM_NEKUDOTAYIM v PHP. S větší obeznámeností začnou dávat chyby větší smysl. Pomáhají i moderní prohlížeče, které již nedávají zcela zbytečné chyby, jako dříve.

Jakou nejvíce matoucí chybu jste viděli? Podělte se o frustraci v komentářích!

Chcete se o těchto chybách dozvědět více a jak jim předcházet? Detekujte problémy v JavaScriptu automaticky pomocí ESLint.