Δημιουργία συναρτήσεων σε JavaScript

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

Υπάρχουν διάφοροι τρόποι δημιουργίας συναρτήσεων σε JavaScript. Εδώ θα μάθετε τους διαφορετικούς τρόπους δημιουργίας συναρτήσεων και πώς να τις χρησιμοποιείτε.

Δηλώσεις συναρτήσεων: Ο άμεσος τρόπος

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

λειτουργίαΌνομα λειτουργίας(Παράμετροι) {
// ο κωδικός πηγαίνει εδώ...
ΕΠΙΣΤΡΟΦΗ"Αυτή είναι μια δήλωση λειτουργίας";
}

Τα στοιχεία του μπλοκ κώδικα παραπάνω περιλαμβάνουν:

• ο λειτουργία λέξη-κλειδί: Αυτή η λέξη-κλειδί δηλώνει μια συνάρτηση.
instagram viewer
• Όνομα λειτουργίας: Αυτό είναι το όνομα της συνάρτησης. Στην πράξη, θα πρέπει να είναι όσο το δυνατόν περιγραφικό και ουσιαστικό, υποδεικνύοντας τι κάνει η λειτουργία.
• Παράμετροι: Αυτό αντιπροσωπεύει τις παραμέτρους συνάρτησης. Οι παράμετροι είναι μια προαιρετική λίστα μεταβλητών που μπορείτε να μεταβιβάσετε σε μια συνάρτηση όταν την καλείτε.
• Το σώμα της συνάρτησης: Περιέχει τον κωδικό που θα εκτελεστεί η συνάρτηση όταν την καλείτε. Περιβάλλεται από σγουρά τιράντες {} και μπορεί να περιέχει οποιονδήποτε έγκυρο κώδικα JavaScript.
• ο ΕΠΙΣΤΡΟΦΗ δήλωση: Αυτή η δήλωση σταματά την εκτέλεση μιας συνάρτησης και επιστρέφει την καθορισμένη τιμή. Στην παραπάνω περίπτωση, η κλήση της συνάρτησης θα επέστρεφε τη συμβολοσειρά "Αυτή είναι δήλωση συνάρτησης".

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

λειτουργίαaddThreeNumbers(α, β, γ) {
ΕΠΙΣΤΡΟΦΗ a + b + c;
}

Για να καλέσετε μια δήλωση συνάρτησης σε JavaScript, γράψτε το όνομα της συνάρτησης ακολουθούμενο από ένα σύνολο παρενθέσεων (). Εάν η συνάρτηση λαμβάνει οποιεσδήποτε παραμέτρους, περάστε τις ως ορίσματα μέσα στις παρενθέσεις.

Για παράδειγμα:

addThreeNumbers(1, 2, 3) // 6

Το μπλοκ κωδικών παραπάνω καλεί το addThreeNumber συναρτήσεις και μεταβιβάζει τα 1, 2 και 3 ως ορίσματα στη συνάρτηση. Εάν εκτελέσετε αυτόν τον κωδικό, θα επιστρέψει την τιμή 6.

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

Για παράδειγμα:

isHoisted(); // Η συνάρτηση είναι ανυψωμένη
λειτουργίαisHoisted() {
κονσόλα.κούτσουρο("Η λειτουργία είναι ανυψωμένη");
ΕΠΙΣΤΡΟΦΗαληθής;
}

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

Εκφράσεις συναρτήσεων: Λειτουργούν ως τιμές

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

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

Παρακάτω είναι η σύνταξη για μια έκφραση συνάρτησης:

συνθ Όνομα λειτουργίας = λειτουργία () {
ΕΠΙΣΤΡΟΦΗ"Έκφραση συνάρτησης";
};

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

Για παράδειγμα:

functionName(); // Έκφραση συνάρτησης

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

Για παράδειγμα:

button.addEventListener("Κάντε κλικ", λειτουργία (Εκδήλωση) {
κονσόλα.κούτσουρο("Κάνατε ένα κουμπί!");
});

Το παραπάνω παράδειγμα χρησιμοποίησε μια παράσταση συνάρτησης που παίρνει ένα Εκδήλωση επιχείρημα ως επανάκληση στο addEventListener λειτουργία. Δεν χρειάζεται να καλέσετε ρητά τη συνάρτηση όταν χρησιμοποιείτε μια έκφραση συνάρτησης ως επιστροφή κλήσης. Καλείται αυτόματα από τη γονική του λειτουργία.

Στην παραπάνω περίπτωση, όταν ο ακροατής συμβάντος λαμβάνει α Κάντε κλικ συμβάν, καλεί τη συνάρτηση επανάκλησης και μεταβιβάζει το Εκδήλωση αντικείμενο ως επιχείρημα.

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

Για παράδειγμα:

isHoisted(); // ReferenceError: Δεν είναι δυνατή η πρόσβαση στο 'isHoisted' πριν από την προετοιμασία
συνθ isHoisted = λειτουργία () {
κονσόλα.κούτσουρο("Η λειτουργία είναι ανυψωμένη");
};

Λειτουργίες βέλους: Συμπαγής και περιορισμένη

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

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

• Ένα ζευγάρι παρενθέσεις (()) που περιέχει τις παραμέτρους. Μπορείτε να παραλείψετε τις παρενθέσεις εάν η συνάρτηση έχει μόνο μία παράμετρο.
• Ενα βέλος (=>), το οποίο αποτελείται από ένα σύμβολο ίσου (=) και ένα σύμβολο μεγαλύτερο από (>).
• Ένα ζευγάρι σγουρά τιράντες που περιέχουν το σώμα της λειτουργίας. Μπορείτε να παραλείψετε τα σγουρά άγκιστρα εάν η συνάρτηση αποτελείται από μία μόνο έκφραση.

Για παράδειγμα:

// Μονή παράμετρος, σιωπηρή επιστροφή
συνθ Όνομα λειτουργίας = παράμετρος =>κονσόλα.κούτσουρο("Λειτουργία βέλους μίας παραμέτρου")
// Πολλαπλές παράμετροι, ρητή επιστροφή
συνθ Όνομα λειτουργίας = (παράμετρος_1, παράμετρος_2) => {
ΕΠΙΣΤΡΟΦΗ"Λειτουργία βέλους πολλαπλών παραμέτρων"
};

Όταν παραλείπετε τα σγουρά άγκιστρα, η συνάρτηση βέλους επιστρέφει έμμεσα τη μοναδική έκφραση, επομένως δεν χρειάζεται ΕΠΙΣΤΡΟΦΗ λέξη-κλειδί. Από την άλλη πλευρά, εάν δεν παραλείψετε τα σγουρά τιράντες, πρέπει να επιστρέψετε ρητά μια τιμή χρησιμοποιώντας το ΕΠΙΣΤΡΟΦΗ λέξη-κλειδί.

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

Για παράδειγμα:

συνθ foo = {
 όνομα: "Ντέιβ",
 χαιρετώ: λειτουργία () {
 setTimeout(() => {
κονσόλα.κούτσουρο(`Γεια, με λένε ${Αυτό.όνομα}`);
 }, 1000);
 },
};
foo.greet(); // Καταγράφει "Hello, my name is Dave" μετά από 1 δευτερόλεπτο

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

Όπως υποδηλώνει το όνομα, μια συνάρτηση που καλείται άμεσα (IIFE) είναι μια συνάρτηση που εκτελείται μόλις οριστεί.

Ακολουθεί η δομή ενός IIFE:

(λειτουργία () {
// κωδικός εδώ
})();
(() => {
// κωδικός εδώ
})();
(λειτουργία (param_1, param_2) {
κονσόλα.log (param_1 * param_2);
})(2, 3);

Ένα IIFE αποτελείται από μια έκφραση συνάρτησης τυλιγμένη μέσα σε ένα ζευγάρι παρενθέσεων. Ακολουθήστε το με ένα ζευγάρι παρενθέσεων έξω από το περίβλημα για να καλέσετε τη συνάρτηση.

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

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

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

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