Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.
Το Hoisting είναι ένας μηχανισμός JavaScript που σας επιτρέπει να έχετε πρόσβαση σε μεταβλητές και συναρτήσεις πριν τις αρχικοποιήσετε. Η ανύψωση μιας τέτοιας δήλωσης την οδηγεί ουσιαστικά στην κορυφή του πεδίου εφαρμογής της.
Μάθετε τα πάντα για το πώς λειτουργεί το hoisting στο JavaScript και πώς να το διαχειριστείτε καλύτερα για να αποφύγετε σφάλματα στον κώδικά σας.
Μεταβλητές ανύψωσης Με var, let και const
Η ανύψωση είναι δυνατή επειδή η JavaScript χρησιμοποιεί το σύστημα μεταγλώττισης JIT (Just-in-Time), το οποίο σαρώνει τον κώδικά σας για να αναγνωρίσει όλες τις μεταβλητές στα αντίστοιχα πεδία τους.
Στη συνέχεια, ο μεταγλωττιστής JIT ανυψώνει όλες τις περιπτώσεις δηλώσεων μεταβλητών στην κορυφή του πεδίου εφαρμογής τους κατά τη μεταγλώττιση. Η JavaScript ανυψώνει μόνο δηλώσεις μεταβλητών, όχι αρχικοποιήσεις τους.
Η συμπεριφορά των μεταβλητών, όταν ανυψώνονται, εξαρτάται από τη λέξη-κλειδί με την οποία τις δηλώνετε, καθώς κάθε λέξη-κλειδί συμπεριφέρεται διαφορετικά.
var
Πρόσβαση σε μια μη αρχικοποιημένη μεταβλητή που έχει δηλωθεί με το var λέξη-κλειδί θα επιστρέψει απροσδιόριστος. Για παράδειγμα:
κονσόλα.log (foo); // απροσδιόριστο
var foo = 2;
Τα παραπάνω αρχεία καταγραφής κώδικα απροσδιόριστος γιατί καλεί console.log πριν αρχικοποιήσει τη μεταβλητή.
Ο μεταγλωττιστής JavaScript βλέπει το προηγούμενο μπλοκ κώδικα ως εξής:
var foo?
κονσόλα.log (foo); // απροσδιόριστο
foo = 2;
Κατά την ανύψωση, οι μεταβλητές υπακούουν στο κανόνες του πεδίου εφαρμογής JavaScript. Το Javascript θα ανυψώσει μόνο μια μεταβλητή στην κορυφή του πεδίου στο οποίο τη δηλώσατε. Η προσπάθεια καταγραφής της τιμής μιας μεταβλητής εκτός του δηλωθέντος πεδίου εφαρμογής της θα έχει ως αποτέλεσμα α Σφάλμα αναφοράς. Για παράδειγμα, αν δηλώσετε μια μεταβλητή μέσα σε μια συνάρτηση, δεν θα είναι ορατή εκτός αυτού του εύρους:
λειτουργίαmyFunction() {
κονσόλα.log (foo); // απροσδιόριστο
var foo = 10;
}
myFunction();
κονσόλα.log (foo); // Σφάλμα αναφοράς: το foo δεν έχει οριστεί
Η προσπάθεια πρόσβασης σε μια μεταβλητή εκτός του πεδίου εφαρμογής της θα έχει ως αποτέλεσμα α Σφάλμα αναφοράς.
ας και συνθ
Σύμφωνα με την MDN τεκμηρίωση για αφήνω και συνθ ανέλκυση, Η JavaScript ανυψώνει επίσης μεταβλητές που δηλώνονται με το αφήνω και συνθ λέξεις-κλειδιά. Ωστόσο, σε αντίθεση με τις μεταβλητές που δηλώνονται με το var λέξη-κλειδί, δεν αρχικοποιούνται με ένα απροσδιόριστος αξία.
Για παράδειγμα:
λειτουργίαmyFunction() {
κονσόλα.log (foo); // απροσδιόριστο
κονσόλα.log (bar); // Σφάλμα αναφοράς: Δεν είναι δυνατή η πρόσβαση στη «γραμμή» πριν από την προετοιμασία
κονσόλα.log (baz); // ReferenceError: Δεν είναι δυνατή η πρόσβαση στο 'baz' πριν από την προετοιμασίαvar foo = 5;
αφήνω μπάρα = 10;
συνθ baz = 15;
}
myFunction();
Δεν μπορείτε να αποκτήσετε πρόσβαση στις μεταβλητές που δηλώνονται με τις λέξεις-κλειδιά let και const πριν τις αρχικοποιήσετε με μια τιμή.
Λειτουργίες ανύψωσης
Τα ανυψωτικά JavaScript λειτουργούν παρόμοια με τις μεταβλητές. Όπως και με τις μεταβλητές, εξαρτάται από το πώς τις δηλώνετε. Για παράδειγμα, η JavaScript ανυψώνει τις δηλώσεις λειτουργιών διαφορετικά από τις εκφράσεις συναρτήσεων.
Μια δήλωση συνάρτησης είναι μια συνάρτηση που δηλώνεται με ένα όνομα, ενώ μια έκφραση συνάρτησης είναι μια συνάρτηση της οποίας το όνομα μπορείτε να παραλείψετε. Για παράδειγμα:
λειτουργίαfoo() {
// δήλωση συνάρτησης
}
συνθ μπάρα = () => {
// έκφραση συνάρτησης
}
Το JavaScript ανυψώνει δηλώσεις συναρτήσεων αλλά όχι εκφράσεις συναρτήσεων. Για παράδειγμα:
foo(); // 5
μπαρ(); // TypeError: η bar() δεν είναι συνάρτηση// Δήλωση συνάρτησης
λειτουργίαfoo() {
κονσόλα.κούτσουρο(5);
}
// Έκφραση συνάρτησης
var μπάρα = λειτουργίαέκφραση() {
κονσόλα.κούτσουρο(10);
};
Αυτός ο κωδικός καλεί foo πριν το δηλώσετε και αρχικοποιήσετε ως συνάρτηση, αλλά εξακολουθεί να καταγράφει 5 στην κονσόλα. Ωστόσο, προσπαθώντας να καλέσετε μπαρ έχει ως αποτέλεσμα α Τυπογραφικό λάθος.
Διαχείριση Ανύψωσης
Η επίγνωση της ανύψωσης και των πιθανών σφαλμάτων που θα μπορούσαν να προκύψουν σε περίπτωση λανθασμένης διαχείρισης, μπορεί να σας εξοικονομήσει πολλές ώρες εντοπισμού σφαλμάτων. Ακολουθούν μερικοί τρόποι με τους οποίους μπορείτε να διαχειριστείτε την ανύψωση.
Δηλώστε μεταβλητές μέσα σε συναρτήσεις
Δηλώστε μεταβλητές μέσα στις συναρτήσεις που θα έχουν πρόσβαση σε αυτές. Δεν θα μπορείτε πάντα να το κάνετε αυτό, καθώς μπορεί να χρειαστείτε μια καθολική μεταβλητή στην οποία μπορείτε να έχετε πρόσβαση σε πολλές λειτουργίες. Επομένως, βεβαιωθείτε ότι δηλώνετε μεταβλητές σε παγκόσμιο επίπεδο μόνο εάν το χρειάζεστε πραγματικά.
Δηλώστε μεταβλητές με let ή const
Θα πρέπει πάντα να χρησιμοποιείτε το let και γonst λέξεις-κλειδιά στη θέση του var λέξη-κλειδί κατά τη δήλωση μεταβλητών. Αυτή η πρακτική είναι ευεργετική όταν δηλώνετε τοπικές μεταβλητές μέσα σε μια συνάρτηση. Γνωρίζοντας τους κατάλληλους τρόπους για να δήλωση μεταβλητών σε JavaScript μειώνει τις πιθανότητες σφαλμάτων που προκαλούνται από ανύψωση στον κώδικά σας.
Δηλώστε τις μεταβλητές στην κορυφή του πεδίου εφαρμογής τους
Δηλώστε όλες τις μεταβλητές σας στην κορυφή των αντίστοιχων πεδίων τους, πριν από οποιαδήποτε άλλη δήλωση. Με αυτόν τον τρόπο θα διασφαλιστεί ότι ο μεταγλωττιστής JavaScript δεν χρειάζεται να ανυψώσει αυτές τις μεταβλητές για πρόσβαση σε αυτές.
Χρήση αυστηρής λειτουργίας
Η αυστηρή λειτουργία είναι μια λειτουργία JavaScript που ρυθμίζει την κακή σύνταξη, βελτιστοποιεί τον χρόνο εκτέλεσης του κώδικά σας και απαγορεύει την κατάχρηση της σύνταξης με χαλαρή πληκτρολόγηση της JavaScript με τη δημιουργία σφαλμάτων κατά το χρόνο μεταγλώττισης.
Για παράδειγμα, σε "sloppy mode", λόγω ανύψωσης, μπορείτε να αποκτήσετε πρόσβαση σε μια μεταβλητή εκτός της αρχικοποιημένης συνάρτησης, παρόλο που δεν είχε δηλωθεί:
myFunction();
κονσόλα.log (foo); // 20
λειτουργίαmyFunction() {
foo = 20;
}
Στο μπλοκ κώδικα παραπάνω, η JavaScript δηλώνει αυτόματα foo και το ανυψώνει στην κορυφή του καθολικού εμβέλειας, αγνοώντας το εύρος στο οποίο το αρχικοποιήσατε.
Μπορείτε να χρησιμοποιήσετε την αυστηρή λειτουργία για να διορθώσετε αυτήν τη συμπεριφορά και να δημιουργήσετε ένα σφάλμα εάν προσπαθήσετε να αποκτήσετε πρόσβαση στη μεταβλητή εκτός του εύρους λειτουργίας της.
Η αυστηρή λειτουργία δεν σταματά την ανύψωση εντελώς. Αντίθετα, αποτρέπει τις πιο συγκεχυμένες και επιρρεπείς σε σφάλματα μορφές ανύψωσης. Είναι σημαντικό να κατανοήσετε τη γενική ιδέα και τους κανόνες πίσω από την ανύψωση, ακόμη και όταν χρησιμοποιείτε το δίχτυ ασφαλείας αυστηρής λειτουργίας.
Για να επιλέξετε την αυστηρή λειτουργία σε παγκόσμιο επίπεδο, δηλώστε τη σύνταξη στην κορυφή του αρχείου σεναρίου:
"χρήσηαυστηρός"; // ή 'χρήσηαυστηρός'
Για να επιλέξετε την αυστηρή λειτουργία σε επίπεδο συνάρτησης, δηλώστε τη σύνταξη στην κορυφή ενός σώματος συνάρτησης πριν από οποιεσδήποτε δηλώσεις:
λειτουργίαmyStrictFunction() {
"χρήσηαυστηρός";
}
Εάν δηλώσετε αυστηρή λειτουργία σε επίπεδο συνάρτησης, η ρύθμιση θα ισχύει μόνο για δηλώσεις εντός αυτής της συνάρτησης.
Η δήλωση αυστηρής λειτουργίας σε παγκόσμιο επίπεδο αποτρέπει την πρόσβαση σε μεταβλητές εκτός του αντιστοίχου πεδίου εφαρμογής τους:
"χρήσηαυστηρός";
myFunction();
κονσόλα.log (foo); // Σφάλμα αναφοράς: το foo δεν έχει οριστεί
λειτουργίαmyFunction() {
foo = 20;
}
Με ενεργοποιημένη την αυστηρή λειτουργία, ο μεταγλωττιστής JavaScript θα ανυψωθεί myFunction() στην κορυφή του πεδίου εφαρμογής του χωρίς τη μη δηλωμένη μεταβλητή.
Κατανοήστε τι επηρεάζει την ανύψωση
Η ανύψωση είναι εντελώς μοναδική στη JavaScript και μπορεί να είναι μια πολύ συγκεχυμένη συμπεριφορά για να τυλίξετε το κεφάλι σας γύρω. Μπορεί να επηρεάσει μεταβλητές και συναρτήσεις, αλλά υπάρχουν τρόποι για να το αποτρέψετε αν χρειαστεί.
Διάφοροι παράγοντες μπορούν να επηρεάσουν την ανύψωση, επομένως είναι καλύτερο να αποφύγετε οποιαδήποτε εμφάνιση ανύψωσης μεταβλητών ή συναρτήσεων στον κώδικά σας.
