Manchmal ist das Schreiben von JavaScript-Code schwierig und manchmal nur beängstigend, was vielen Entwicklern bekannt ist. Dabei treten zwangsläufig Fehler auf, von denen einige häufig wiederholt werden. Der Artikel für Anfänger befasst sich mit diesen Fehlern und deren Behebung. Aus Gründen der Übersichtlichkeit werden die Namen von Funktionen, Eigenschaften und Objekten einem
beliebten Song entnommen. All dies hilft, sich schnell daran zu erinnern, wie häufig auftretende Fehler behoben werden können.
Wir erinnern Sie daran: Für alle Leser von „Habr“ - ein Rabatt von 10.000 Rubel bei der Anmeldung für einen Skillbox-Kurs mit dem Promo-Code „Habr“.
Skillbox empfiehlt: Praktikum "Mobile Developer PRO" .
TypeError: Eigenschaft nicht definiert
let girl = { name: "Lucky", location: "Hollywood", profession: "star", thingsMissingInHerLife: true, lovely: true, cry: function() { return "cry, cry, cries in her lonely heart" } } console.log(girl.named.lucky)
Der obige Beispielcode löst einen nicht erfassten Typfehler aus: Die Eigenschaft 'Glück' eines undefinierten Fehlers kann nicht gelesen werden. Das Problem ist, dass das Mädchenobjekt keine benannte Eigenschaft hat, obwohl es eine Namenseigenschaft gibt. Und da die Eigenschaft girl.named nicht definiert ist, ist es unmöglich, darauf zuzugreifen, da sie formal nicht existiert. Aber wenn Sie girl.named.lucky durch girl.name ersetzen, funktioniert alles und das Programm gibt Lucky zurück.
Lesen Sie hier mehr über die Eigenschaften.
Methoden zum Beheben von TypeError-Fehlern
TypeError-Fehler treten auf, wenn ein Programmierer versucht, Aktionen für Daten auszuführen, die keinem bestimmten Typ entsprechen. Verwenden Sie beispielsweise .bold (), fordern Sie eine undefinierte Eigenschaft an oder rufen Sie eine Funktion auf, die eigentlich keine Funktion ist.
Wenn Sie also versuchen, girl () aufzurufen, wird ein nicht erfasster TypeError-Fehler angezeigt: yourVariable.bold ist keine Funktion und girl ist keine Funktion, da tatsächlich das Objekt aufgerufen wird, nicht die Funktion.
Um Fehler zu beseitigen, müssen Sie die Variablen untersuchen. Also, was ist Mädchen? Und wie heißt girl.named? Sie können herausfinden, ob Sie den Code analysieren, die Variablen mithilfe von console.log with, dem Befehl debugger oder durch Aufrufen des Variablennamens in der Konsole anzeigen. Sie müssen sicherstellen, dass es möglich ist, mit dem in der Variablen enthaltenen Datentyp zu arbeiten. Wenn es nicht passt, ändern Sie es, fügen Sie beispielsweise eine Bedingung hinzu oder versuchen Sie, den Block zu fangen und die Kontrolle über den Vorgang zu erlangen.
Stapelüberlauf
Wenn Sie den Autoren der Wörter des Liedes Baby One More Time glauben (das ist Britney Spears, huh), dann bedeutet das Wort Hit in diesem Zusammenhang den Wunsch des Sängers, erneut angerufen zu werden (hier eine Erklärung des Kontextes des Liedes, ca. Übersetzer). Es kann durchaus sein, dass dieser Wunsch zu einer Zunahme der Anzahl von Anrufen im wirklichen Leben führt. Bei der Programmierung ist dies jedoch eine Rekursion, die einen Fehler verursachen kann, wenn der Aufrufstapel überläuft.
Die Fehler sind wie folgt:
Fehler: Nicht genügend Stapelplatz (Edge)
InternalError: zu viel Rekursion (Firefox)
RangeError: Maximale Aufrufstapelgröße überschritten (Chrome)
Ein Stapelüberlauf tritt auf, wenn der Entwickler den Basisfall bei der Rekursion nicht berücksichtigt hat oder wenn der Code den bereitgestellten Fall nicht behandelt.
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness++ return oneMoreTime(stillBelieve, loneliness) }
In diesem Fall kann stillBelieve niemals auf false gesetzt werden, sodass oneMoreTime jedes Mal aufgerufen wird, die Funktion jedoch niemals beendet wird.
Wenn Sie anfangen, auf zwei Freunde zu hoffen, verringert dies die Einsamkeit (Einsamkeit) und Sie können nicht auf den Anruf warten.
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness-- stillBelieve = false return oneMoreTime(stillBelieve, loneliness) }
Beispielsweise gibt es Fälle mit Endlosschleifen, in denen das System keine Fehlermeldung ausgibt und die Seite, auf der der JavaScript-Code ausgeführt wird, einfach einfriert. Dies geschieht, wenn die while-Schleife keine Beendigungsbedingung hat.
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") }
Sie können das Problem wie folgt lösen:
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") worldEnded = true }
Debuggen Sie Endlosschleifen und Rekursionen
Wenn Sie ein Problem mit einer Endlosschleife haben, müssen Sie in Chrome oder Edge die Registerkarte schließen und in Firefox das Browserfenster schließen. Danach müssen Sie den Code sorgfältig analysieren. Wenn Sie das Problem nicht finden können, sollten Sie den Debugger-Befehl zur Schleife oder Funktion hinzufügen und den Wert der Variablen überprüfen. Wenn das Ergebnis nicht den Erwartungen entspricht, können Sie es problemlos ersetzen.
Im obigen Beispiel sollte der Debugger als erste Zeile einer Funktion oder Schleife hinzugefügt werden. Anschließend müssen Sie die Registerkarte "Debuggen" in Chrome öffnen, indem Sie die Variablen im Gültigkeitsbereich analysieren. Mit der nächsten Schaltfläche können Sie ihre Änderung bei jeder Iteration verfolgen. All dies zu tun ist einfach und in den meisten Fällen ist das Problem.
Mehr dazu lesen Sie hier (
für Chrome ) und hier (
für Firefox ).
Syntaxfehler
Einer der häufigsten JavaScript-Fehler ist SyntaxError. Vermeiden Sie sie, um den Texteditor zu erweitern. Der Bracket Pair Colorizer markiert die Klammern im Code in verschiedenen Farben, und Prettier oder ein ähnliches Analysetool ermöglicht das schnelle Auffinden von Fehlern. Die beste Option, um die Wahrscheinlichkeit von SyntaxError zu verringern, ist die minimale Verschachtelung.
Teilen Sie in den Kommentaren: Was tun Sie, um Fehler zu vermeiden oder sie schnell zu erkennen und zu beseitigen?
Skillbox empfiehlt: