Μοντέλο ταυτότητας JavaScript και βρόχος συμβάντων

Ο χρόνος εκτέλεσης Javascript είναι ένα νήμα που σημαίνει ότι μπορεί να εκτελέσει ένα κομμάτι κώδικα κάθε φορά. Για να κατανοήσουμε το μοντέλο ταυτόχρονης λειτουργίας και το βρόχο συμβάντων στο Javascript πρέπει πρώτα να γνωρίσουμε μερικούς κοινούς όρους που σχετίζονται με αυτό.

Η στοίβα κλήσεων

Αρχικά ας μάθουμε για το τι είναι μια στοίβα κλήσεων.

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

Ας δούμε ένα παράδειγμα κώδικα για να κατανοήσουμε τη στοίβα κλήσεων:

function multiply(x,y) { return x * y; } function squared(n) { return multiply(n,n) } function printSquare(n) { return squared(n) } let numberSquared = printSquare(5); console.log(numberSquared);

Πρώτον, όταν ο κώδικας εκτελεί τον χρόνο εκτέλεσης θα διαβάσει κάθε έναν από τους ορισμούς της συνάρτησης. Αλλά όταν φτάσει στη γραμμή όπου ενεργοποιείται η πρώτη συνάρτηση printSquare (5) , θα ωθήσει αυτή τη λειτουργία στη στοίβα κλήσεων.

Στη συνέχεια, αυτή η λειτουργία θα εκτελεστεί. Πριν επιστρέψει, θα συναντήσει μια άλλη λειτουργία, το τετράγωνο (n) , οπότε θα αναστείλει την τρέχουσα λειτουργία της και θα ωθήσει αυτήν τη λειτουργία πάνω από την υπάρχουσα λειτουργία.

Εκτελεί τη συνάρτηση (σε αυτήν την περίπτωση η συνάρτηση τετραγώνου) και τέλος συναντά μια άλλη συνάρτηση πολλαπλασιασμού (n, n) . Στη συνέχεια, αναστέλλει τις τρέχουσες εκτελέσεις του και ωθεί αυτή τη λειτουργία στη στοίβα κλήσεων. Η συνάρτηση πολλαπλασιάζεται και επιστρέφει με την πολλαπλασιασμένη τιμή.

Τέλος, η συνάρτηση τετραγώνου επιστρέφει και εμφανίζεται από τη στοίβα και στη συνέχεια το ίδιο ισχύει και για το printSquare. Η τελική τετραγωνική τιμή κατανέμεται στη μεταβλητή numberSquared.

Αντιμετωπίζουμε ξανά μια επίκληση συνάρτησης (σε αυτήν την περίπτωση είναι μια δήλωση console.log ()) οπότε ο χρόνος εκτέλεσης το ωθεί στη στοίβα. Αυτό εκτελεί εκτυπώνοντας έτσι τον τετραγωνικό αριθμό στην κονσόλα.

Σημειώστε ότι η πρώτη συνάρτηση που μπαίνει στη στοίβα πριν εκτελεστεί κάποιος από τους παραπάνω κωδικούς είναι η κύρια λειτουργία. Κατά το χρόνο εκτέλεσης αυτό δηλώνεται ως «ανώνυμη συνάρτηση».

Για να συνοψίσουμε: κάθε φορά που γίνεται επίκληση μιας συνάρτησης, ωθείται στη στοίβα κλήσεων όπου εκτελείται. Τέλος, όταν η συνάρτηση γίνει με την εκτέλεση και επιστρέφει είτε σιωπηρά είτε ρητά, θα εμφανιστεί από τη στοίβα.

Η στοίβα κλήσεων καταγράφει ακριβώς σε ποιο χρονικό σημείο ποια λειτουργία εκτελούσε. Και παρακολουθεί ποια λειτουργία εκτελείται αυτήν τη στιγμή.

Το πρόγραμμα περιήγησης

Τώρα γνωρίζουμε από αυτό ότι το Javascript μπορεί να εκτελεί ένα πράγμα κάθε φορά, αλλά αυτό δεν συμβαίνει με το πρόγραμμα περιήγησης. Το πρόγραμμα περιήγησης έχει το δικό του σύνολο API όπως το setTimeout και το XMLHttpRequests που δεν καθορίζονται στο Javascript runtime.

Στην πραγματικότητα, αν κοιτάξετε τον πηγαίο κώδικα του V8, του δημοφιλούς χρόνου εκτέλεσης Javascript που τροφοδοτεί προγράμματα περιήγησης όπως το Google Chrome, δεν θα βρείτε ορισμούς για αυτό. Αυτό συμβαίνει επειδή αυτά τα ειδικά API Ιστού υπάρχουν στο περιβάλλον του προγράμματος περιήγησης και όχι στο περιβάλλον javascript. Έτσι μπορείτε να πείτε ότι αυτά τα API εισάγουν ταυτόχρονη συνένωση.

Ας δούμε ένα διάγραμμα για να κατανοήσουμε ολόκληρη την εικόνα.

Μοντέλο ταυτότητας και βρόχου συμβάντων

Μερικοί περισσότεροι όροι εισάγονται εδώ, οπότε ας τα εξετάσουμε:

Σωρός : Είναι κυρίως το μέρος όπου κατανέμονται τα αντικείμενα.

Ουρά επιστροφής κλήσης : Είναι μια δομή δεδομένων που αποθηκεύει όλες τις επιστροφές κλήσεων. Δεδομένου ότι είναι μια ουρά, τα στοιχεία υποβάλλονται σε επεξεργασία με βάση το FIFO που είναι το First in First Out.

Event Loop : Εδώ συγκεντρώνονται όλα αυτά τα πράγματα. Ο βρόχος συμβάντων ελέγχει απλώς τη στοίβα κλήσεων και αν είναι κενή (που σημαίνει ότι δεν υπάρχουν λειτουργίες στη στοίβα), παίρνει την παλαιότερη επιστροφή κλήσης από την ουρά κλήσης και την ωθεί στη στοίβα κλήσεων που τελικά εκτελεί την επιστροφή κλήσης.

Ας το καταλάβουμε με ένα παράδειγμα κώδικα:

console.log('hi'); setTimeout(function() { console.log('freecodeCamp') },5000); console.log('JS')

Όταν εκτελείται η πρώτη γραμμή είναι ένα console.log (). Αυτή είναι μια επίκληση συνάρτησης που σημαίνει ότι αυτή η λειτουργία ωθείται στη στοίβα κλήσεων όπου εκτελεί την εκτύπωση «hi» στην κονσόλα. Τελικά επέστρεψε και βγαίνει από τη στοίβα.

Στη συνέχεια, όταν ο χρόνος εκτέλεσης πηγαίνει για την εκτέλεση του setTimeout (), γνωρίζει ότι πρόκειται για διαδικτυακό API. Επομένως, το εκχωρεί στο πρόγραμμα περιήγησης για να χειριστεί την εκτέλεση του. Το πρόγραμμα περιήγησης ξεκινά το χρονόμετρο και στη συνέχεια ο χρόνος εκτέλεσης JS βγαίνει από το stackTimeout () από τη στοίβα. Αντιμετωπίζει μια άλλη επίκληση του console.log () και έτσι το ωθεί στη στοίβα κλήσεων, το μήνυμα «JS» συνδέεται στην κονσόλα και στη συνέχεια επιστρέφεται τελικά. Στη συνέχεια, το τελευταίο console.log () εμφανίζεται από τη στοίβα. Τώρα η στοίβα κλήσεων είναι άδεια.

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

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

Και πάλι μέσα στον κώδικα υπάρχει μια επίκληση του console.log (), οπότε αυτή η συνάρτηση πηγαίνει στην κορυφή της στοίβας εκτελεί το οποίο καταγράφει το «freecodecamp» στην κονσόλα και τελικά επιστρέφει. Αυτό σημαίνει ότι ξεπροβάλλει από τη στοίβα και τέλος η επιστροφή κλήσης βγαίνει από τη στοίβα και τελειώσαμε.

Για να το οπτικοποιήσετε καλύτερα δοκιμάστε αυτό το εργαλείο από τον Phillip Roberts: Loupe Event Loop Visualizer