06. Κλείσιμο της JavaScript (Function Closures)

Function Closures


Οι μεταβλητές JavaScript μπορούν να ανήκουν στο τοπικό ή στο καθολικό πεδίο εφαρμογής.

Οι συνολικές μεταβλητές μπορούν να γίνουν τοπικές (ιδιωτικές) με κλείσιμο .


Παγκόσμιες μεταβλητές

Μία function μπορεί να έχει πρόσβαση σε όλες τις μεταβλητές που ορίζονται στο εσωτερικό της συνάρτησης, όπως εδώ:

Παράδειγμα

function myFunction() {
  var a = 4;
  return a * a;
}

Δοκιμάστε τον εαυτό σας »

Αλλά μία function μπορεί επίσης να έχει πρόσβαση σε μεταβλητές που ορίζονται εκτός της συνάρτησης, όπως εδώ:

Παράδειγμα

var a = 4;
function myFunction() {
  return a * a;
}

Δοκιμάστε τον εαυτό σας »

Στο τελευταίο παράδειγμα, το a είναι μια καθολική μεταβλητή.

Σε μια ιστοσελίδα, οι καθολικές μεταβλητές ανήκουν στο αντικείμενο παραθύρου.

Οι καθολικές μεταβλητές μπορούν να χρησιμοποιηθούν (και να αλλάξουν) από όλα τα σενάρια στη σελίδα (και στο παράθυρο).

Στο πρώτο παράδειγμα, το a είναι μια τοπική μεταβλητή.

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

Οι γενικές και τοπικές μεταβλητές με το ίδιο όνομα είναι διαφορετικές μεταβλητές. Η τροποποίηση της μιας, δεν τροποποιεί την άλλη.

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


Διάρκεια ζωής μεταβλητής

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

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


Ένα δίλημμα μετρητή

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

Θα μπορούσατε να χρησιμοποιήσετε μια καθολική μεταβλητή και μια functionγια να αυξήσετε τον μετρητή:

Παράδειγμα

// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The counter should now be 3

Δοκιμάστε τον εαυτό σας »

Υπάρχει ένα πρόβλημα με την παραπάνω λύση: Οποιοσδήποτε κώδικας στη σελίδα μπορεί να αλλάξει τον μετρητή, χωρίς να καλέσει το add().

Ο μετρητής θα πρέπει να είναι τοπικός στη add() συνάρτηση, για να εμποδίσει να αλλαχτεί από άλλο κώδικα:

Παράδειγμα

// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
  var counter = 0;
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 0

Δοκιμάστε τον εαυτό σας »

Δεν λειτούργησε επειδή εμφανίσαμε τον καθολικό μετρητή αντί του τοπικού μετρητή.

Μπορούμε να αφαιρέσουμε τον παγκόσμιο μετρητή και να αποκτήσουμε πρόσβαση στον τοπικό μετρητή αφήνοντας τη συνάρτηση να τον επιστρέψει:

Παράδειγμα

// Function to increment counter
function add() {
  var counter = 0;
  counter += 1;
  return counter;
}

// Call add() 3 times
add();
add();
add();

//The counter should now be 3. But it is 1.

Δοκιμάστε τον εαυτό σας »

Δεν λειτούργησε επειδή επαναφέρουμε τον τοπικό μετρητή κάθε φορά που καλούμε τη συνάρτηση.

 Μια εσωτερική συνάρτηση JavaScript μπορεί να λύσει αυτό.


Εμφωλευμένες συναρτήσεις JavaScript (Nested Functions)

Όλες οι συναρτήσεις έχουν πρόσβαση στο καθολικό πεδίο.  

Στην πραγματικότητα, στο JavaScript, όλες οι συναρτήσεις έχουν πρόσβαση στο πεδίο “πάνω” απ αυτές.

Η JavaScript υποστηρίζει τις εμφωλευμένες συναρτήσεις. Οι εμφωλευμένες συναρτήσεις έχουν πρόσβαση στο πεδίο “πάνω” απ αυτές.

Σε αυτό το παράδειγμα, η εσωτερική συνάρτηση plus() έχει πρόσβαση στη μεταβλητή counter στη γονική συνάρτηση:

Παράδειγμα

function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();   
  return counter;
}

Δοκιμάστε τον εαυτό σας »

Αυτό θα μπορούσε να έχει λύσει το δίλημμα, αν μπορούσαμε να φτάσουμε στη plus() συνάρτηση από έξω.

Πρέπει επίσης να βρούμε έναν τρόπο εκτέλεσης counter = 0 μόνο μία φορά.

Χρειαζόμαστε ένα κλείσιμο.


Κλείσιμο της JavaScript

Θυμηθείτε τις αυτόκλητες συναρτήσεις; Τι κάνει αυτή η συνάρτηση;

Παράδειγμα

var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

// the counter is now 3

Δοκιμάστε τον εαυτό σας »

Επεξήγηση παραδείγματος

Στη μεταβλητή add έχει εκχωρηθεί η τιμή επιστροφής μιας αυτόκλητης συνάρτησης.

Η συνάρτηση αυτόκλητης εκκίνησης εκτελείται μόνο μία φορά. Θέτει τον μετρητή στο μηδέν (0) και επιστρέφει μια έκφραση συνάρτησης.

Με αυτόν τον τρόπο η add γίνεται μια συνάρτηση. Το “θαυμάσιο” μέρος είναι ότι μπορεί να έχει πρόσβαση στον μετρητή στο γονικό πεδίο.

Αυτό ονομάζεται κλείσιμο (closure) JavaScript Κάνει δυνατή μια συνάρτηση να έχει ” ιδιωτικές ” μεταβλητές.

Ο μετρητής προστατεύεται από το πεδίο εφαρμογής της ανώνυμης συνάρτησης και μπορεί να αλλάξει μόνο με τη συνάρτηση add.

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

Days
Hours
Minutes

06. Κλείσιμο της JavaScript (Function Closures)

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: