Γιατί πρέπει να είστε προσεκτικοί χρησιμοποιώντας τις συναρτήσεις βέλους στο JavaScript

Η σύνταξη της συνάρτησης βέλους έφτασε με την κυκλοφορία του ECMAScript 2015, γνωστό και ως ES6. Σήμερα, οι λειτουργίες βέλους έχουν γίνει το αγαπημένο χαρακτηριστικό πολλών προγραμματιστών JavaScript. Αυτή η αγάπη για τις λειτουργίες βέλους οφείλεται στη συνοπτική σύνταξη και την απλή συμπεριφορά της λέξης-κλειδιού "αυτή".

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

1. Πρέπει να ορίσετε μια λειτουργία βέλους πριν τη χρησιμοποιήσετε

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

Εξετάστε για παράδειγμα τον ακόλουθο κώδικα JavaScript:

συνθ doubleNumbers = (αριθμοί) { 
 numbers.map(n => n * 2)
}
συνθ halveNumbers = (αριθμοί) { 
 numbers.map(n => n / 2)
}
συνθ sumNumbers = (αριθμοί) { 
 αριθμοί.reduce((sum, n) => { 
ΕΠΙΣΤΡΟΦΗ άθροισμα + n; 
 }, 0)
}
συνθ αριθμοί = [1, 20, 300, 700, 1500]
συνθ διπλασιασμένος = διπλός Αριθμοί (αριθμοί)
κονσόλα.log (halveNumbers (διπλασιάστηκε))
κονσόλα.log (sumNumbers (numbers))

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

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

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

2. Οι λειτουργίες βέλους μπορεί να προκαλούν σύγχυση σε μερικούς ανθρώπους

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

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

Συγκρίνετε τις δύο παρακάτω λειτουργίες:

συνθ μισοί Αριθμοί = (αριθμοί) => {
ΕΠΙΣΤΡΟΦΗ numbers.map(n => n / 2)
}
λειτουργίαμισοί Αριθμοί(αριθμοί) { 
ΕΠΙΣΤΡΟΦΗ numbers.map(n => n / 2)
}

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

3. Δεν μπορείτε να χρησιμοποιήσετε τις συναρτήσεις βέλους ως μεθόδους

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

Σκεφτείτε το ακόλουθο αντικείμενο:

συνθ άτομο = {
 όνομα: "Kyle",
 επίθετο: "Μάγειρας",
 Όνομα εκτύπωσης: () => {
κονσόλα.κούτσουρο(`${Αυτό.όνομα}``${Αυτό.επίθετο}` )
 }
}
person.printName()

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

Για να λύσετε αυτό το ζήτημα, πρέπει να χρησιμοποιήσετε μια κανονική συνάρτηση:

συνθ άτομο = {
 όνομα: "Kyle",
 επίθετο: "Μάγειρας",
 Όνομα εκτύπωσης: λειτουργία() {
κονσόλα.κούτσουρο(`${Αυτό.όνομα}``${Αυτό.επίθετο}` )
 }
}
person.printName()

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

Πότε να χρησιμοποιήσετε τις συναρτήσεις βέλους

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

Συγκρίνετε αυτά τα δύο και αποφασίστε ποιο είναι πιο απλό:

λειτουργίαμισοί Αριθμοί(αριθμοί) {
ΕΠΙΣΤΡΟΦΗ numbers.map(n => n / 2)
}
λειτουργίαμισοί Αριθμοί(αριθμοί) {
ΕΠΙΣΤΡΟΦΗ numbers.map(λειτουργία(n) {
ΕΠΙΣΤΡΟΦΗ n / 2
 })
}

Και οι δύο περιπτώσεις περνούν μια συνάρτηση επανάκλησης στη μέθοδο map(). Αλλά η πρώτη επανάκληση είναι μια συνάρτηση βέλους ενώ η δεύτερη είναι μια πλήρης λειτουργία. Μπορείτε να δείτε πώς η πρώτη συνάρτηση καταλαμβάνει λιγότερες γραμμές κώδικα από τη δεύτερη συνάρτηση: τρεις έναντι. πέντε.

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

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

έγγραφο.addEventListener("Κάντε κλικ", λειτουργία(μι) {
κονσόλα.κούτσουρο("ΛΕΙΤΟΥΡΓΙΑ", Αυτό, e.στόχος)
})
έγγραφο.addEventListener("Κάντε κλικ", (ε) => {
κονσόλα.κούτσουρο("ΒΕΛΟΣ", Αυτό, e.στόχος)
})

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

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

Μάθετε περισσότερα σχετικά με τις Λειτουργίες βέλους έναντι των κανονικών συναρτήσεων

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