Πότε (και γιατί) πρέπει να χρησιμοποιήσετε τις λειτουργίες βέλους ES6 - και πότε δεν πρέπει

Οι λειτουργίες βέλους (που ονομάζονται επίσης «Λειτουργίες βέλους λίπους») είναι αναμφίβολα ένα από τα πιο δημοφιλή χαρακτηριστικά του ES6. Εισήγαγαν έναν νέο τρόπο συγγραφής συνοπτικών λειτουργιών.

Εδώ είναι μια συνάρτηση γραμμένη στη σύνταξη ES5:

function timesTwo(params) { return params * 2}function timesTwo(params) { return params * 2 } timesTwo(4); // 8

Τώρα, εδώ είναι η ίδια συνάρτηση που εκφράζεται με μια συνάρτηση βέλους:

var timesTwo = params => params * 2 timesTwo(4); // 8

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

Είναι σημαντικό να κατανοήσετε πώς συμπεριφέρεται η λειτουργία βέλους σε σύγκριση με τις κανονικές λειτουργίες ES5.

Παραλλαγές

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

1. Δεν υπάρχουν παράμετροι

Εάν δεν υπάρχουν παράμετροι, μπορείτε να τοποθετήσετε κενές παρενθέσεις πριν από το =&gt ;.

() => 42

Στην πραγματικότητα, δεν χρειάζεστε καν τις παρενθέσεις!

_ => 42

2. Ενιαία παράμετρος

Με αυτές τις λειτουργίες, οι παρενθέσεις είναι προαιρετικές:

x => 42 || (x) => 42

3. Πολλαπλές παράμετροι

Απαιτούνται παρενθέσεις για αυτές τις συναρτήσεις:

(x, y) => 42

4. Δηλώσεις (σε αντίθεση με τις εκφράσεις)

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

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

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

var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }

5. "Μπλοκ σώματος"

Εάν η λειτουργία σας βρίσκεται σε μπλοκ, πρέπει επίσης να χρησιμοποιήσετε τη ρητή returnδήλωση:

var addValues = (x, y) => { return x + y }

6. Κυριολεκτικά αντικείμενα

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

x =>({ y: x })

Συντακτικά ανώνυμος

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

Αυτή η ανωνυμία δημιουργεί ορισμένα ζητήματα:

  1. Είναι πιο δύσκολο να εντοπιστεί το σφάλμα

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

2. Χωρίς αυτοαναφορά

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

Κύριο όφελος: Χωρίς δεσμευτικό «αυτό»

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

Για παράδειγμα, δείτε την setTimeoutπαρακάτω λειτουργία:

// ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };

Στο παράδειγμα ES5, .bind(this)απαιτείται για τη μεταφορά του thisπεριβάλλοντος στη συνάρτηση. Διαφορετικά, από προεπιλογή thisθα ήταν απροσδιόριστο.

// ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };

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

Όταν δεν πρέπει να χρησιμοποιείτε τις λειτουργίες Arrow

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

Ακολουθούν ορισμένες περιπτώσεις όπου πιθανώς δεν θέλετε να τις χρησιμοποιήσετε:

  1. Μέθοδοι αντικειμένου

Όταν καλείτε cat.jumps, ο αριθμός των ζωών δεν μειώνεται. Αυτό οφείλεται στο γεγονός thisότι δεν δεσμεύεται σε τίποτα και θα κληρονομήσει την αξία thisαπό το πεδίο εφαρμογής του γονέα.

var cat = { lives: 9, jumps: () => { this.lives--; } }

2. Λειτουργίες επιστροφής με δυναμικό περιβάλλον

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

var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });

Εάν κάνουμε κλικ στο κουμπί, θα λάβουμε ένα TypeError. Είναι επειδή thisδεν είναι δεσμευμένο στο κουμπί, αλλά αντίθετα δεσμεύεται στο πεδίο εφαρμογής του γονέα.

3. Όταν κάνει τον κωδικό σας λιγότερο ευανάγνωστο

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

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

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

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

Ευχαριστούμε που διαβάσατε το άρθρο μου και μοιραστείτε αν σας άρεσε! Ρίξτε μια ματιά στα άλλα άρθρα μου, όπως το πώς δημιούργησα την εφαρμογή Pomodoro Clock, και τα μαθήματα που έμαθα στην πορεία και Ας απομυθοποιήσουμε τη «νέα» λέξη-κλειδί της JavaScript.