Λειτουργίες JavaScript

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

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

Λειτουργικές εκφράσεις

Όταν δηλώνετε απλώς μια λειτουργία με λειτουργία τη λέξη-κλειδί, τις προαιρετικές παραμέτρους και το σώμα του κώδικα, είναι α λειτουργία δήλωση.

Βάλτε αυτή τη δήλωση σε μια έκφραση JavaScript (όπως σε μια εκχώρηση ή αριθμητική έκφραση), γίνεται a λειτουργία έκφραση.

// Λειτουργία δήλωση λειτουργίας function_name () ; // Λειτουργική έκφραση var function_name = function () ; 

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

function_name (); // λειτουργία κλήσης [WORKS] συνάρτηση function_name () ; 

Ωστόσο, οι εκφράσεις λειτουργιών δεν ανυψώνονται καθώς οι λειτουργίες γίνονται μέρος των εκφράσεων και δεν είναι αυτόνομες δηλώσεις.

function_name (); // κλήση λειτουργίας [WILL NOT WORK] var function_name = function () ; 

Άμεση έκφραση λειτουργικής έκφρασης (IIFE)

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

Παρακάτω είναι οι δύο πιο συνηθισμένες συνταγές για τη δημιουργία του IIFE:

(συνάρτηση optional_function_name () // body ()); 

και

(συνάρτηση optional_function_name () // body) (); 

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

// Μερικοί από τους τρόπους δημιουργίας της λειτουργίας IIFEs () / * ... * / (); + συνάρτηση () / * ... * / (); νέα συνάρτηση () / * ... * /; 

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

var page_language = (λειτουργία () var lang; // Κωδικός για να πάρει τη γλώσσα της σελίδας επιστροφή lang;) (); 

Ο κώδικας για τη λήψη της γλώσσας της σελίδας εκτελείται μόνο μία φορά (κατά προτίμηση μετά τη φόρτωση της σελίδας). Το αποτέλεσμα αποθηκεύεται στο page_language για μεταγενέστερη χρήση.

Μέθοδοι

Όταν μια συνάρτηση είναι η ιδιότητα ενός αντικειμένου, ονομάζεται μέθοδος. Δεδομένου ότι μια συνάρτηση είναι επίσης ένα αντικείμενο, μια συνάρτηση μέσα σε μια άλλη λειτουργία είναι επίσης μια μέθοδος. Παρακάτω είναι ένα παράδειγμα για μια μέθοδο μέσα στο αντικείμενο.

var calc = add: συνάρτηση (a, b) επιστροφή a + b, sub: συνάρτηση (a, b) return a-b console.log (calc.add (1,2)); // 3 κονσόλα.log (calc.sub (80,2)); // 78 

ο προσθέτω και υπο οι λειτουργίες είναι μέθοδοι calc αντικείμενο.

Τώρα για μια συνάρτηση στο παράδειγμα λειτουργίας:

(a) επιστροφή συνάρτηση (b) επιστροφή a + b; console.log (προσθέστε (1) (2))? // Η έξοδος είναι 3 

Η επιστρεφόμενη ανώνυμη λειτουργία είναι μια μέθοδος λειτουργίας προσθέτω.

Σημείωση: Από την παράμετρο (ένα) της λειτουργίας προσθέτω στο παραπάνω παράδειγμα είναι διαθέσιμο για την ακόλουθη λειτουργία invoke, αυτός ο τύπος διαδικασίας καλείται κάρυ.

Κατασκευαστές

Όταν προσθέτετε νέος λέξη-κλειδί πριν από μια συνάρτηση και να την καλέσετε, γίνεται κατασκευαστής που δημιουργεί στιγμιότυπα. Παρακάτω είναι ένα παράδειγμα όπου οι κατασκευαστές χρησιμοποιούνται για να δημιουργήσουν στιγμιότυπα Καρπός και οι τιμές προστίθενται σε κάθε μία από αυτές Καρπός's ιδιότητες.

λειτουργία Fruit () όνομα βα, οικογένεια; // Επιστημονικό όνομα & οικογένεια this.getName = συνάρτηση () return name;; this.setName = συνάρτηση (τιμή) name = value; this.getFamily = λειτουργία () επιστροφή οικογένειας?; this.setFamily = συνάρτηση (τιμή) οικογένεια = αξία;  var μήλο = νέα Φρούτα (); apple.setName ("Malus domestica"). apple.setFamily ("Rosaceae"); var πορτοκάλι = νέα φρούτα (); orange.setName ("Citrus Ã?  ?? â ?? ?? sinensis "), orange.setFamily (" Rutaceae "), console.log (orange.getName ()), //" Citrus à ??  ?? â ?? ?? sinensis "console.log (apple.getName ()) // //" Malus domestica "console.log (orange.getFamily ()) // //" Rutaceae " 

Λειτουργίες βέλους (πρότυπο ES6) [Μόνο στον Firefox]

Ένας νέος ορισμός της λειτουργίας από το πρότυπο ES6 παρέχει μια σύντομη σύνταξη για την έκφραση λειτουργίας. Η σύνταξη είναι

() => / * σώμα * / 

Αυτή η λειτουργία δείγματος:

var sing = λειτουργία () console.log ('τραγούδι ...'); 

είναι το ίδιο με:

var sing = () => console.log ('τραγούδι ...'); 

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

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

setInterval (συνάρτηση () console.log ('μήνυμα'), 1000); 

σε

setInterval (() => console.log ('μήνυμα'), 1000). 

Λειτουργίες γεννήτριας (πρότυπο ES6) [Μόνο στον Firefox]

Ένας άλλος νέος ορισμός λειτουργίας από το πρότυπο ES6 είναι η λειτουργία γεννήτριας. Οι λειτουργίες γεννήτριας μπορούν να σταματήσουν και να συνεχίσουν την εκτέλεσή τους. Η σύνταξή του είναι:

λειτουργία * όνομα_επαφής ()  

ή

λειτουργία * όνομα_επαφής ()  

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

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

Παρακάτω είναι ένα απλό παράδειγμα:

συνάρτηση * generator_func (count) για (var i = 0; i 
Ακολουθεί ένα άλλο παράδειγμα:
 
συνάρτηση * randomIncrement (i) απόδοση i + 3; απόδοση ί + 5; απόδοση ί + 10; απόδοση ί + 6;  var itr = randomIncrement (4). console.log (τιμή .txt ().) // 7 κονσόλα.log (η.κ.εξ. (). Αξία); // 9 κονσόλα.log (η.κ.αξία (). Αξία); // 14 
 
Υπάρχει επίσης a απόδοση παραγωγής* έκφραση η οποία μεταβιβάζει την τιμή σε άλλη λειτουργία γεννήτριας
 
λειτουργία * φρούτα (φρούτα) απόδοση * λαχανικά (φρούτα); απόδοση "Σταφύλια".  λειτουργία * λαχανικά (φρούτα) απόδοση φρούτα + "και σπανάκι"? φρούτα + "και Μπρόκολα". φρούτα απόδοσης + "και Αγγούρι"?  var itr = φρούτα ("Apple"); console.log (τιμή .txt ().) // "Apple και σπανάκι" κονσόλα.log (τιμή. // "Μήλο και Μπρόκολο" console.log (τιμή. // "Apple και Αγγούρι" κονσόλα.log (τιμή .txt ().); // "Σταφύλια". //απροσδιόριστος 
 
Οι λειτουργίες γεννήτριας είναι χρήσιμες εάν θέλετε να περάσετε τις τιμές μία προς μία στο προτιμώμενο σημείο του κώδικα κάνοντας παύση, αντί να πηγαίνετε σε ένα βέλος.
 
συμπέρασμα
 
Έχω συμπεριλάβει μια λίστα παραπομπών παρακάτω, όπου θα βρείτε συνδέσμους σε αναφορές και άρθρα που ξεκινούν σε βάθος για διαφορετικά θέματα ξεχωριστά. Τόσο οι τυπικές λειτουργίες ES6 θα λειτουργούν μόνο στον Firefox προς το παρόν.
 
βιβλιογραφικές αναφορές
 
Γλώσσα ECMAScript: Λειτουργίες και κλάσεις
 
Άμεση έκφραση έκφρασης λειτουργίας (IIFE)
 
Τα βασικά των γεννητριών ES6
 
Λειτουργίες βέλους
 
Λειτουργία - Δίκτυο προγραμματιστών Mozilla