Τι είναι τα κλεισίματα JavaScript και πώς τα γράφετε;

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

Τι είναι τα κλεισίματα;

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

Πριν δείτε μερικά παραδείγματα κλεισίματος JavaScript, θα πρέπει να κατανοήσετε το λεξικό πεδίο εφαρμογής.

Τι είναι ένα λεξικό περιβάλλον;

Το λεξικό περιβάλλον είναι η τοπική μνήμη μαζί με το γονικό της περιβάλλον. Δείτε το παράδειγμα που δίνεται παρακάτω και μαντέψτε την έξοδο του παρακάτω κώδικα:

λειτουργία outer(){ 
 έστω a = 10;
 console.log (y);
 εσωτερικός();
 συνάρτηση inner(){
 console.log (a);
 console.log (y);
 }
}
έστω y = 9;
εξωτερικός();

Η έξοδος θα είναι 9, 10, 9. Η εσωτερική συνάρτηση έχει πρόσβαση στις μεταβλητές του γονέα της, το εξωτερικός() λειτουργία. Ως εκ τούτου, το εσωτερικός() η λειτουργία μπορεί να έχει πρόσβαση μεταβλητή α. ο εσωτερικός() η λειτουργία μπορεί επίσης να έχει πρόσβαση μεταβλητή y λόγω της έννοιας του αλυσίδα εμβέλειας.

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

Επεξήγηση παραδειγμάτων κλεισίματος JavaScript

Εφόσον έχετε μάθει για το λεξικό περιβάλλον, μπορείτε εύκολα να μαντέψετε την έξοδο του παρακάτω κώδικα:

συνάρτηση a(){
 έστω x = 10;
 συνάρτηση b(){
 console.log (x);
 }
 σι();
}
ένα();

Η έξοδος είναι 10. Αν και μπορεί να μην το μαντέψετε με την πρώτη ματιά, αυτό είναι ένα παράδειγμα κλεισίματος σε JavaScript. Τα κλεισίματα δεν είναι τίποτα άλλο από μια συνάρτηση και το λεξιλογικό τους περιβάλλον.

Ας εξετάσουμε ένα παράδειγμα όπου υπάρχουν τρεις συναρτήσεις φωλιασμένες η μία μέσα στην άλλη:

συνάρτηση a(){ 
 έστω x = 10;
 συνάρτηση b(){ 
 συνάρτηση c(){
 συνάρτηση d(){
 console.log (x);
 }
 ρε();
 }
 ντο();
 }
 σι();
}
ένα();

Θα λέγεται ακόμα κλείσιμο; Η απάντηση είναι ναι. Και πάλι, ένα κλείσιμο είναι μια συνάρτηση με τον λεξικό γονέα του. Ο λεξιλογικός γονέας της συνάρτησης ρε() είναι ντο(), και λόγω της έννοιας της αλυσίδας εμβέλειας, λειτουργία ρε() έχει πρόσβαση σε όλες τις μεταβλητές των εξωτερικών συναρτήσεων και των καθολικών.

Ρίξτε μια ματιά σε ένα άλλο ενδιαφέρον παράδειγμα:

συνάρτηση x(){
 έστω a = 9;
 συνάρτηση επιστροφής y(){
 console.log (a); 
 }
}
έστω b = x();

Μπορείτε να επιστρέψετε μια συνάρτηση μέσα σε μια συνάρτηση, να αντιστοιχίσετε μια συνάρτηση σε μια μεταβλητή και να περάσετε μια συνάρτηση μέσα σε μια συνάρτηση λειτουργία σε JavaScript. Αυτή είναι η ομορφιά της γλώσσας. Μπορείτε να μαντέψετε ποια θα είναι η έξοδος εάν εκτυπώσετε μεταβλητή σι? Θα εκτυπώσει τη λειτουργία y(). Η λειτουργία Χ() επιστρέφει μια συνάρτηση y(). Ως εκ τούτου, η μεταβλητή σι αποθηκεύει μια λειτουργία. Τώρα, μπορείτε να μαντέψετε τι θα συμβεί αν καλέσετε τη μεταβλητή σι? Εκτυπώνει την τιμή της μεταβλητής ένα: 9.

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

Τώρα πρέπει να υπολογίσετε πόσες φορές γίνεται κλικ στο κουμπί. Υπάρχουν δύο τρόποι για να γίνει αυτό.

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

   Κάντε κλικ σε εμένα
   
   

2. Μπορούμε να επιτύχουμε απόκρυψη δεδομένων χρησιμοποιώντας κλεισίματα. Μπορείτε να τυλίξετε ολόκληρο addEventListener() λειτουργία μέσα σε μια συνάρτηση. Κάνει κλείσιμο. Και αφού δημιουργήσετε ένα κλείσιμο, μπορείτε να δημιουργήσετε ένα μεταβλητή μέτρησης και αυξήστε την τιμή του με κλικ. Χρησιμοποιώντας αυτήν τη μέθοδο, η μεταβλητή θα παραμείνει στο λειτουργικό πεδίο, και δεν μπορεί να γίνει καμία τροποποίηση.

   Κάντε κλικ σε εμένα
   
   

Σχετίζεται με: The Hidden Hero of Websites: Understanding the DOM

Γιατί είναι σημαντικά τα κλεισίματα;

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

Εξετάστε αυτό το παράδειγμα σύνθεσης συνάρτησης:

const πολλαπλασιάζω = (a, b) => a*b;
const multiplyBy2 = x => πολλαπλασιάζω (10, x);
console.log (multiplyBy2(9));

Μπορούμε να εφαρμόσουμε το ίδιο παράδειγμα χρησιμοποιώντας κλεισίματα:

const πολλαπλασιάζω = συνάρτηση (a){
 συνάρτηση επιστροφής (β){
 επιστροφή α*β
 }
}
const multiplyBy2 = πολλαπλασιάζω (2);
console.log (multiplyBy2(10))

Οι λειτουργίες μπορούν να χρησιμοποιούν κλεισίματα στα ακόλουθα σενάρια:

1. Για την υλοποίηση της λειτουργίας currying
2. Για χρήση για απόκρυψη δεδομένων
3. Για χρήση με Event Listeners
4. Για χρήση στη μέθοδο setTimeout()

Δεν πρέπει να χρησιμοποιείτε άσκοπα κλεισίματα

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

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

Ακολουθεί ένα παράδειγμα που δείχνει πώς οι μεταβλητές μέσα στα κλεισίματα δεν θα συλλέγονται σκουπίδια.

 συνάρτηση f(){
 const x = 3;
 συνάρτηση επιστροφής inner(){
 console.log (x);
 }
 }
 φά()();

ο μεταβλητή x εδώ καταναλώνει τη μνήμη παρόλο που δεν χρησιμοποιείται συχνά. Ο συλλέκτης σκουπιδιών δεν θα μπορεί να ελευθερώσει αυτήν τη μνήμη επειδή βρίσκεται μέσα στο κλείσιμο.

Η JavaScript είναι ατελείωτη

Το mastering JavaScript είναι μια ατελείωτη εργασία, καθώς υπάρχουν τόσες πολλές έννοιες και πλαίσια που συνήθως δεν διερευνώνται από τους ίδιους τους έμπειρους προγραμματιστές. Μπορείτε να βελτιώσετε σημαντικά το χειρισμό σας στο JavaScript μαθαίνοντας τα βασικά και εξασκώντας τα συχνά. Οι επαναλήψεις και οι γεννήτριες είναι μερικές από τις έννοιες που ζητούν οι συνεντεύξεις κατά τη διάρκεια συνεντεύξεων JavaScript.

Εισαγωγή στους Iterators και Generators σε JavaScript

Αποκτήστε το hang των μεθόδων iterator και generator στο JS.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα