Ωχ, το έκανα ξανά: Εντοπισμός σφαλμάτων κοινών σφαλμάτων στο JavaScript

Ωχ, το έκανα ξανά: Εντοπισμός σφαλμάτων κοινών σφαλμάτων στο JavaScript

Η σύνταξη κώδικα JavaScript μπορεί να είναι προκλητική και μερικές φορές εντελώς εκφοβιστική, όπως γνωρίζουν πολλοί προγραμματιστές. Στη διαδικασία της εργασίας, αναπόφευκτα προκύπτουν σφάλματα και μερικά από αυτά επαναλαμβάνονται συχνά. Αυτό το άρθρο, που απευθύνεται σε αρχάριους προγραμματιστές, μιλά για αυτά τα σφάλματα και τον τρόπο επίλυσής τους. Για λόγους σαφήνειας, λαμβάνονται τα ονόματα των συναρτήσεων, των ιδιοτήτων και των αντικειμένων δημοφιλές τραγούδι. Όλα αυτά σας βοηθούν να θυμάστε γρήγορα πώς να διορθώσετε κοινά λάθη.

Υπενθύμιση: για όλους τους αναγνώστες του "Habr" - έκπτωση 10 ρούβλια κατά την εγγραφή σε οποιοδήποτε μάθημα Skillbox χρησιμοποιώντας τον κωδικό προσφοράς "Habr".

Το Skillbox προτείνει: Πρακτικό μάθημα "Mobile Developer PRO".

TypeError: η ιδιότητα δεν έχει οριστεί

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)

Το παραπάνω παράδειγμα κώδικα εμφανίζει το σφάλμα Uncaught TypeError: Δεν είναι δυνατή η ανάγνωση της ιδιότητας "τυχερός" του απροσδιόριστου. Το πρόβλημα είναι ότι το αντικείμενο girl δεν έχει μια ιδιότητα με όνομα, αν και έχει μια ιδιότητα ονόματος. Και επειδή η ιδιότητα girl.named δεν έχει οριστεί, δεν μπορείτε να αποκτήσετε πρόσβαση, γιατί τυπικά δεν υπάρχει. Αλλά αν αντικαταστήσετε το girl.named.lucky με το girl.name, τότε όλα θα λειτουργήσουν και το πρόγραμμα θα επιστρέψει Lucky.

Μπορείτε να μάθετε περισσότερα για τα ακίνητα διαβάστε εδώ.

Τρόπος επίλυσης TypeErrors

Τα σφάλματα τύπου εμφανίζονται όταν ένας προγραμματιστής επιχειρεί να εκτελέσει ενέργειες σε δεδομένα που δεν ταιριάζουν με έναν συγκεκριμένο τύπο. Τα παραδείγματα περιλαμβάνουν τη χρήση .bold(), το αίτημα για μια απροσδιόριστη ιδιότητα ή την κλήση μιας συνάρτησης που στην πραγματικότητα δεν είναι συνάρτηση.

Έτσι, αν προσπαθήσετε να καλέσετε το girl(), θα λάβετε το σφάλμα Uncaught TypeError: το yourVariable.bold δεν είναι συνάρτηση και το girl δεν είναι συνάρτηση, επειδή στην πραγματικότητα είναι ένα αντικείμενο που καλείται, όχι μια συνάρτηση.

Για να εξαλείψετε τα σφάλματα, πρέπει να μελετήσετε τις μεταβλητές. Λοιπόν, τι είναι ένα κορίτσι; Τι είναι το κορίτσι. Μπορείτε να το μάθετε αναλύοντας τον κώδικα, εμφανίζοντας μεταβλητές χρησιμοποιώντας το console.log, την εντολή εντοπισμού σφαλμάτων ή καλώντας το όνομα της μεταβλητής στην κονσόλα. Πρέπει να βεβαιωθείτε ότι είναι δυνατή η λειτουργία με τον τύπο δεδομένων που περιέχεται στη μεταβλητή. Εάν δεν ταιριάζει, αλλάξτε το, για παράδειγμα, προσθέστε μια συνθήκη ή δοκιμάστε..catch block - και αποκτήστε τον έλεγχο της εκτέλεσης της λειτουργίας.

Υπερχείλιση στοίβας

Εάν πιστεύετε τους συγγραφείς των στίχων του τραγουδιού Baby One More Time (αυτή είναι η Britney Spears, ναι), τότε η λέξη hit σε αυτό το πλαίσιο σημαίνει την επιθυμία του τραγουδιστή να καλέσει ξανά (εδώ είναι μια εξήγηση του ίδιου του πλαισίου του τραγούδι - σημείωμα μεταφραστή). Μπορεί κάλλιστα αυτή η επιθυμία να οδηγήσει σε αύξηση του αριθμού των κλήσεων στην πραγματική ζωή. Αλλά στον προγραμματισμό, αυτή είναι μια αναδρομή που μπορεί να προκαλέσει σφάλμα εάν η στοίβα κλήσεων υπερχειλίσει.

Τα σφάλματα μοιάζουν με αυτό:

Σφάλμα: Δεν υπάρχει χώρος στοίβας (Edge)
Εσωτερικό Σφάλμα: πολύ μεγάλη αναδρομή (Firefox)
Σφάλμα εύρους: Υπέρβαση του μέγιστου μεγέθους στοίβας κλήσεων (Chrome)

Μια υπερχείλιση στοίβας προκύπτει εάν ο προγραμματιστής δεν λαμβάνει υπόψη τη βασική περίπτωση στην αναδρομή ή εάν ο κώδικας δεν αντιμετωπίζει την προβλεπόμενη περίπτωση.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Σε αυτήν την περίπτωση, το stillBelieve δεν μπορεί ποτέ να είναι ψευδές, επομένως το oneMoreTime θα καλείται κάθε φορά, αλλά η συνάρτηση δεν θα ολοκληρωθεί ποτέ.

Εάν αρχίσετε να βασίζεστε σε δύο φίλους, αυτό θα μειώσει τη μοναξιά και δεν θα χρειαστεί να περιμένετε μια κλήση.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Ένα παράδειγμα είναι περιπτώσεις με άπειρους βρόχους, όταν το σύστημα δεν δημιουργεί μήνυμα σφάλματος, αλλά η σελίδα στην οποία εκτελείται ο κώδικας JavaScript απλώς παγώνει. Αυτό συμβαίνει εάν ο βρόχος while δεν έχει συνθήκη τερματισμού.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Μπορείτε να λύσετε το πρόβλημα ως εξής:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Εντοπισμός σφαλμάτων άπειρων βρόχων και αναδρομών

Εάν αντιμετωπίζετε πρόβλημα απεριόριστου βρόχου, πρέπει να κλείσετε την καρτέλα στο Chrome ή στο Edge και να κλείσετε το παράθυρο του προγράμματος περιήγησης στον Firefox. Μετά από αυτό, πρέπει να αναλύσετε προσεκτικά τον κώδικα. Εάν δεν μπορείτε να βρείτε το πρόβλημα, αξίζει να προσθέσετε μια εντολή εντοπισμού σφαλμάτων στον βρόχο ή τη συνάρτησή σας και να ελέγξετε τις τιμές των μεταβλητών. Εάν το αποτέλεσμα δεν ανταποκρίνεται στο αναμενόμενο, τότε το αντικαθιστούμε, αυτό μπορεί να γίνει εύκολα.

Στο παραπάνω παράδειγμα, το πρόγραμμα εντοπισμού σφαλμάτων θα πρέπει να προστεθεί ως η πρώτη γραμμή της συνάρτησης ή του βρόχου. Στη συνέχεια, πρέπει να ανοίξετε την καρτέλα εντοπισμού σφαλμάτων στο Chrome, αναλύοντας τις μεταβλητές ως προς το εύρος. Χρησιμοποιώντας το κουμπί επόμενο, μπορείτε να παρακολουθείτε τις αλλαγές τους με κάθε επανάληψη. Όλα αυτά είναι εύκολο να γίνουν, και στις περισσότερες περιπτώσεις το πρόβλημα εντοπίζεται.

Μπορείτε να διαβάσετε περισσότερα για όλα αυτά εδώ (για Chrome) και εδώ (για Firefox).

Συντακτικό λάθος

Ένα από τα πιο συνηθισμένα σφάλματα στο JavaScript είναι το SyntaxError. Οι επεκτάσεις επεξεργασίας κειμένου θα σας βοηθήσουν να τις αποφύγετε. Για παράδειγμα, το Bracket Pair Colorizer επισημαίνει αγκύλες στον κώδικα με διαφορετικά χρώματα και το Prettier ή ένα παρόμοιο εργαλείο ανάλυσης καθιστά δυνατή τη γρήγορη εύρεση σφαλμάτων. Η καλύτερη επιλογή για τη μείωση της πιθανότητας ενός SyntaxError είναι η ελάχιστη ένθεση.

Μοιραστείτε τα σχόλια: τι κάνετε για να αποτρέψετε λάθη ή να τα εντοπίσετε γρήγορα και να τα εξαλείψετε;

Το Skillbox προτείνει:

Πηγή: www.habr.com

Προσθέστε ένα σχόλιο