Έχουν γίνει πολύ της μόδας, τα βλέπουμε σε όλα τα νέα άρθρα. Και, αν δεν τα έχετε συνηθίσει, θα δυσκολευτείτε να κατανοήσετε τον σύγχρονο κώδικα (ES6) που περιέχει λειτουργίες βέλους.

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

Εδώ είναι ένα μικρό παράδειγμα:

Const addOne = συνάρτηση(n) (επιστρέφει n + 1; )

Ο παραπάνω κώδικας μπορεί να γραφτεί ως εξής:

Const addOne = (n) => (επιστρέφει n + 1; )

Ή, σε αυτήν την περίπτωση, ακόμη πιο σύντομη:

Const addOne = (n) => n + 1;

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

Μία παράμετρος

Όταν μια συνάρτηση βέλους έχει μία παράμετρο, οι παρενθέσεις μπορούν να παραλειφθούν:

// Ήταν: someCallBack((αποτελέσματα) => ( ... )) // Τώρα: someCallBack(αποτελέσματα => ( ... ))

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

SomeCallBack(() => ( ... ))

Λειτουργίες επανάκλησης

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

Var_this = αυτό; someCallBack(function() ( _this.accessOuterScope(); ))

Υπάρχουν πολλές παραλλαγές αυτού του "_this" (όπως "self" ή "that"), αλλά η ιδέα είναι η ίδια. Στις λειτουργίες επανάκλησης χρειαζόμαστε πρόσβαση στην έκδοση εξωτερικού πεδίου, αλλά η ιδέα είναι η ίδια. Στις λειτουργίες επανάκλησης, χρειαζόμαστε πρόσβαση στην έκδοση του εξωτερικού εύρους , η οποία είναι πλέον διαφορετική από πριν, καθώς μιλάμε για συνάρτηση επανάκλησης.

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

SomeCallBack(() => ( this.accessOuterScope(); ))

"Περικάλυμμα"

Ας φανταστούμε μια κατάσταση όπως στο React, όπου το συμβάν στο κλικθα πρέπει να καλεί doSomething() , (), αλλά θα πρέπει επίσης να περάσει ορίσματα στην doSomething() (π.χ. ID). Αυτό το παράδειγμα δεν λειτουργεί στην πραγματικότητα:

Κάποιος χρήστης) ))

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

Const User = React.createClass(function() ( render: function() ( return Some user), onClick: function() ( doSomething(this.props.userId); ) ))

Η απουσία παρένθεσης στο this.onClick σημαίνει ότι είναι απλώς μια αναφορά συνάρτησης και όχι μια κλήση συνάρτησης.

Η συνάρτηση onClick() είναι πλέον κάτι σαν περιτύλιγμα για doSomething() . Με τις λειτουργίες βέλους μπορείτε να φτιάξετε "περιτυλίγματα" αυτού του τύπου:

Const User = React.createClass(function() ( render: function() ( return doSomething(this.props.userId))>Κάποιος χρήστης ))

Ως εναλλακτική, θα μπορούσαμε επίσης να χρησιμοποιήσουμε το .bind() , το οποίο δεν απαιτεί κανένα περιτύλιγμα (συναρτήσεις βέλους ή οτιδήποτε άλλο):

Const User = React.createClass(function() ( render: function() ( return Some user ) ))

Υποστήριξη προγράμματος περιήγησης για λειτουργίες βέλους

Εάν χρειάζεστε υποστήριξη προγράμματος περιήγησης εκτός από πιο πρόσφατες εκδόσεις ΧρώμιοΚαι Firefox, χρήση Μετατροπέας Babelγια να μετατρέψετε τον κωδικό ES6 που γράψατε σε ES5.

Το ES6 έχει έναν νέο τρόπο δημιουργίας συναρτήσεων - Χρησιμοποιώντας τον τελεστή Βέλος =>. Τέτοιες συναρτήσεις ονομάζονται συναρτήσεις βέλους. Προσφέρουν μια πιο συμπαγή σύνταξη. Δεν έχουν όνομα και λειτουργούν διαφορετικά με αυτό .

Το πρώτο πράγμα που θα κάνουμε είναι να εκτελέσουμε ένα σενάριο Babel που θα παρακολουθεί τα αρχεία και θα δημιουργεί νέες εκδόσεις όταν αλλάζουν.

Ανοίξτε το φάκελο του έργου γραμμή εντολών(ΚΣ). Εισαγάγετε την εντολή:

Και πατήστε Enter

Στο φάκελο src θα δημιουργήσουμε ένα αρχείο arr.js και θα το υποδείξουμε αμέσως στο αρχείο index.html

</script>

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

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

Συνάρτηση add (x, y) ( return x + y; ) console.log (add (3, 6));

Στην κονσόλα θα δούμε το αποτέλεσμα - 9

Τώρα, ας μετατρέψουμε αυτή τη συνάρτηση σε συνάρτηση βέλους.

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

Έστω προσθήκη = (x, y) => x + y; console.log(add(4, 6));

Εάν κοιτάξετε τον τύπο της μεταβλητής προσθήκης χρησιμοποιώντας τον τελεστή typeof:

Console.log(typeof(add));

Αυτό θα δούμε στην κονσόλα λειτουργιών

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

"χρησιμοποιήστε αυστηρά"? var _typeof = type of Symbol === "function" && type of Symbol.iterator === "symbol" ? συνάρτηση (obj) ( return typeof obj; ) : function (obj) ( return obj && type of Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj ; ); var add = συνάρτηση add(x, y) ( return x + y; ); console.log(add(4, 6)); console.log(typeof add === "undefined" ? "undefined" : _typeof(add));

Μπορούμε να δούμε ότι η Babel έχει μετατρέψει τον κώδικά μας σε μια απλή έκφραση συνάρτησης.

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

Έστω προσθήκη = (x, y) => x + y; console.log(add(4, 6)); console.log(typeof(add)); έστω Square = συνάρτηση(α) (επιστρέφει a * a; ) console.log(square (4));

Ας δούμε στην κονσόλα:

Η συνάρτηση βέλους θα μοιάζει με αυτό:

Έστω τετράγωνο = x => x * x;

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

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

Συνάρτηση givNumer () ( return 33; ) console.log(givNumer ());

Αυτή η συνάρτηση απλώς εκτυπώνει τον αριθμό 33 στην κονσόλα. Βέλος:

Έστω givNumer = () => 33; console.log(givNumer());

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

Έστω log = συνάρτηση () ( console.log("Hello World!"); ); κούτσουρο();

Διακόπτης:

Έστω log = () => console.log("Hello World!!!"); κούτσουρο();

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

Η συνάρτηση θα λάβει δύο παραμέτρους. Ας δημιουργήσουμε μια μεταβλητή στο σώμα της συνάρτησης. Μετά από αυτό θα επιστρέψουμε το αποτέλεσμα.

Έστω mult = συνάρτηση (a, b) (έστω αποτέλεσμα = a * b; επιστροφή αποτέλεσμα; ) console.log(mult (4, 5));

Εάν υπάρχουν πολλές γραμμές σε μια συνάρτηση βέλους, τότε απαιτούνται σγουρά τιράντες - ()! Και φροντίστε να ορίσετε τι επιστρέφει αυτή η συνάρτηση χρησιμοποιώντας τη λέξη-κλειδί επιστροφής

Διακόπτης:

Έστω mult = (a, b) => (έστω αποτέλεσμα = a * b; επιστροφή αποτέλεσμα; ) console.log(mult (4, 5));

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

Έστω literal = συνάρτηση () ( return ( name: "John"); ) console.log (literal ());

Στην κονσόλα θα δούμε:

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

Θα πρέπει να θυμόμαστε ότι εάν μια συνάρτηση βέλους επιστρέφει ένα αντικείμενο κυριολεκτικά, τότε χρειάζονται παρενθέσεις - ()

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

Έστω literal = () => ((όνομα: "John")); console.log(literal());

Τώρα ας προσπαθήσουμε να χρησιμοποιήσουμε τη συνάρτηση βέλους ως έκφραση συνάρτησης IIFE - Άμεση κλήση

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

Μοιάζει με αυτό:

(συνάρτηση () ( console.log("IIFE"); ))();

Η συνάρτηση IIFE βέλους θα μοιάζει με αυτό:

(() => console.log("IIFE"))();

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

Δεν μπορείτε απλώς να το πάρετε και να το μετακινήσετε σε μια γραμμή παρακάτω. Θα βγάλει σφάλμα!

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

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

Ας υπολογίσουμε το άθροισμα όλων των μεταβλητών του πίνακα. Για να γίνει αυτό, θα δηλώσω μια άλλη μεταβλητή - έστω άθροισμα = 0;

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

Έστω αριθμοί = ; έστω άθροισμα = 0; numbers.forEach(συνάρτηση(αριθμός) (άθροισμα += αριθμός; )); console.log(sum);

Στην κονσόλα θα δούμε 55. Ας μετατρέψουμε αυτή τη συνάρτηση σε συνάρτηση βέλους: numbers.forEach(num => sum += num); console.log(sum);

Έτσι, αυτό που προηγουμένως μας έπαιρνε τρεις γραμμές τώρα παίρνει μία.

Μπορούμε επίσης να τετραγωνίσουμε κάθε στοιχείο του πίνακα.

Έστω τετράγωνο = numbers.map(n => n * n); console.log(τετράγωνο);

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

Το αντικείμενο προσώπου θα έχει μια ιδιότητα ονόματος με την τιμή "Bob" και μια ιδιότητα χαιρετισμού με την τιμή "Greet". Θα εκτυπώσουμε τον χαιρετισμό στην κονσόλα και θα εξετάσουμε επίσης τον σκοπό αυτού .

Let person = ( name: "Bob", greet: function () ( console.log("Hello! Το όνομά μου είναι " + this.name); console.log(this); ) ); person.greet();

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

Τώρα θα αντικαταστήσουμε τη συνάρτηση με ένα βέλος και θα δούμε τι θα συμβεί σε αυτό.

Let person = ( name: "Bob", greet: () => ( console.log("Hello! Το όνομά μου είναι " + this.name); console.log(this); ) ); person.greet();

Τώρα δεν λάβαμε την τιμή του ονόματος και η τιμή αυτού είναι παράθυρο!

Μα γιατί? Το θέμα είναι ότι η τιμή αυτού λαμβάνεται από το περιβάλλον στο οποίο δηλώνεται η συνάρτηση. ! Ανεξάρτητα από το πού θα εκτελεστεί αυτή η λειτουργία. Αυτό φαίνεται στην εικόνα:

Έχουμε πρόγραμμα.

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

Αν κοιτάξουμε μια κανονική συνάρτηση, τότε ξέρουμε ότι αυτή αναφέρεται στο ίδιο το αντικείμενο του ατόμου. Ίσως ρωτήσετε γιατί η τιμή αυτού στις συναρτήσεις βέλους λαμβάνεται από το περιβάλλον; Και η απάντηση είναι πολύ απλή - το έκαναν έτσι! :-) Το θέμα είναι ότι οι συναρτήσεις βέλους δημιουργήθηκαν για την επίλυση προβλημάτων σε διαφορετική κατάσταση. Ας δούμε ένα παράδειγμα. Για να δούμε το πρόβλημα θα επιστρέψουμε στη συνάρτηση βέλους.

Let person = ( name: "Bob", greet: function () ( console.log("Hello! Το όνομά μου είναι " + this.name); console.log(this); ) );

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

Let person = ( όνομα: "Bob", greet: function () ( setTimeout(function () ( console.log("Hello! Το όνομά μου είναι " + this.name); console.log(this); ), 2000) ;) ); person.greet();

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

Μα γιατί? Αν κοιτάξετε τον κώδικα μας, είναι λογικό να υποθέσουμε. ότι αυτό αναφέρεται στο αντικείμενο προσώπου αφού χρησιμοποιούμε μια κανονική συνάρτηση. Το θέμα είναι ότι η setTimeout() ανήκει στο αντικείμενο του παραθύρου. Αν το γράψετε ως εξής: window.setTimeout() , τότε σε τι νομίζετε ότι αναφέρεται; Και στην κονσόλα θα έχουμε το ίδιο αποτέλεσμα! Υπάρχουν διάφοροι τρόποι επίλυσης αυτού του προβλήματος στο ES5. Θα δούμε την πιο κοινή: Πριν από τη setTimeout(), θα δηλώσω μια άλλη μεταβλητή που και θα την εκχωρήσω ως τιμή. Και τώρα, στο σώμα της συνάρτησης, αντί για αυτό, θα υποδείξουμε αυτό.

Let person = ( όνομα: "Bob", greet: function () ( let that = this; setTimeout(function () ( console.log("Γεια! Το όνομά μου είναι " + that.name); console.log(that) ; ), 2000); ) ); person.greet();

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

Για λόγους σαφήνειας, μπορείτε να δείτε σε τι αναφέρεται αυτό και αυτό.

Let person = ( name: "Bob", greet: function () ( let that = this; setTimeout(function () ( console.log("Hello! Το όνομά μου είναι " + that.name); console.log("It is my That = " + that); console.log("It is my This = " + this); ), 2000); ) ); person.greet();

Θα δούμε επιβεβαίωση στην κονσόλα:

Βλέπουμε ότι αυτό θα είναι το αντικείμενο παραθύρου - This = , και αυτό θα είναι το αντικείμενο του ατόμου μας - That = .

Στο ES6, μπορούμε απλά να χρησιμοποιήσουμε μια συνάρτηση βέλους για να λύσουμε αυτό το πρόβλημα.

Let person = ( name: "Bob", greet: function () ( setTimeout(() => ( console.log("Hello! My name is " + this.name); console.log("It is my This = " + αυτό); ), 2000); )); person.greet();

Ως αποτέλεσμα, θα δούμε στην κονσόλα:

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

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

Για αναφορά, μπορείτε να δείτε πώς το έλυσε αυτό η Βαβέλ

Var person = ( όνομα: "Bob", greet: function greet() ( var _this = αυτό; setTimeout(function () ( console.log("Γεια! Το όνομά μου είναι " + _this.name); console.log(" It is my This = " + _this); ), 2000); ) ); person.greet(); Η Babel χρησιμοποίησε την ίδια μέθοδο που χρησιμοποιήσαμε στο ES5. Η μόνη διαφορά είναι ότι ονομάσαμε τη μεταβλητή ότι, και η Babel την αποκάλεσε - _this. Χάρη στο κλείσιμο, η συνάρτηση που στέλνουμε στο setTimeout θα έχει πρόσβαση στη μεταβλητή _this και, ως εκ τούτου, στο αντικείμενο πρόσωπο.

Νομίζω ότι το πιο δύσκολο μέρος αυτού του μέρους είναι να κατανοήσουμε πώς λειτουργούν τα κλεισίματα.

Μερικά ακόμη χαρακτηριστικά των συναρτήσεων βέλους:
Μπορείτε να δείτε περισσότερες πληροφορίες για τις λειτουργίες ES6 και βέλους στην ανάρτησή μου

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

Οι συναρτήσεις βέλους είναι συναρτήσεις που γράφονται χρησιμοποιώντας τον τελεστή βέλους (=>).

Ας δούμε αμέσως ένα παράδειγμα:

Έστω προσθήκη = (x, y) => x + y;
console.log(add(5, 2));

Ως αποτέλεσμα της εκτέλεσης αυτής της λειτουργίας, θα δούμε τον αριθμό 7 στην κονσόλα.

Αρχικά, περνάμε τα ορίσματα σε παρένθεση, μετά βάζουμε το σύμβολο βέλους και μετά γράφουμε τον κώδικα της ίδιας της συνάρτησης. Στην περίπτωσή μας, παίρνει απλώς δύο αριθμούς και τους προσθέτει. Θεωρητικά, αυτό είναι το ίδιο με την έκφραση συνάρτησης στο ES5. Εάν χρησιμοποιείτε Babel ή παρόμοιους μεταγλωττιστές, πιθανότατα θα γράψουν κάτι σαν αυτό:

Var add = συνάρτηση add(x, y) (
επιστροφή x + y;
};

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

Έστω τετράγωνο = x => x*x;

Αυτή η συνάρτηση παίρνει μόνο ένα όρισμα και τετραγωνίζει τον δεδομένο αριθμό.

Λειτουργία χωρίς παραμέτρους:

Έστω func = () => 77;

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

Έστω πολλαπλασιασμός = (x, y) => (
έστω αποτέλεσμα = x*y;
αποτέλεσμα επιστροφής?
};

Εάν πρέπει να επιστρέψετε ένα αντικείμενο κυριολεκτικά, τότε πρέπει να το τυλίξετε σε παρένθεση:

Έστω getObject = () => (( brand: "BMW" ));

Η λειτουργία αυτο-επίκλησης μοιάζει με αυτό:

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

Σύνταξη Βασική σύνταξη (param1, param2, …, paramN) => ( δηλώσεις ) (param1, param2, …, paramN) => έκφραση // ισοδύναμη με: => ( έκφραση επιστροφής; ) // Οι παρενθέσεις είναι προαιρετικές όταν υπάρχουν μόνο ένα όνομα παραμέτρου: (singleParam) => ( δηλώσεις ) singleParam => ( δηλώσεις ) // Η λίστα παραμέτρων για μια συνάρτηση χωρίς παραμέτρους πρέπει να γραφτεί με ένα ζευγάρι παρενθέσεων. () => ( δηλώσεις ) Σύνθετη σύνταξη // Βάλτε σε παρένθεση το σώμα μιας συνάρτησης για να επιστρέψετε μια κυριολεκτική έκφραση αντικειμένου: params => ((foo: bar)) // Υποστηρίζονται οι παράμετροι ανάπαυσης και οι προεπιλεγμένες παράμετροι (param1, param2, ...rest) => ( δηλώσεις ) (param1 = defaultValue1, param2, …, paramN = defaultValueN) => ( δηλώσεις ) // Υποστηρίζεται επίσης η καταστροφή στη λίστα παραμέτρων var f = ( = , (x: c) = (x: a + b)) => a + b + c; f(); // 6 Περιγραφή

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

Συντομότερες συναρτήσεις var στοιχεία = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; // Αυτή η δήλωση επιστρέφει τον πίνακα: elements.map (function(element) ( return element.length; )); // Η κανονική συνάρτηση παραπάνω μπορεί να γραφτεί ως η συνάρτηση βέλους κάτω από τα στοιχεία.map((στοιχείο) => ( επιστρεφόμενο στοιχείο.length; )); // // Όταν υπάρχει μόνο μία παράμετρος, μπορούμε να αφαιρέσουμε τις περιβάλλουσες παρενθέσεις στοιχεία.map (στοιχείο => ( return element.length; )); // // Όταν η μόνη πρόταση σε μια συνάρτηση βέλους είναι "return", μπορούμε να αφαιρέσουμε το "return" και να αφαιρέσουμε // τις γύρω αγκύλες στοιχεία.map(element => element.length); // // Σε αυτήν την περίπτωση, επειδή χρειαζόμαστε μόνο την ιδιότητα length, μπορούμε να χρησιμοποιήσουμε την παράμετρο destructuring: // Παρατηρήστε ότι το "length" αντιστοιχεί στην ιδιότητα που θέλουμε να λάβουμε ενώ το // προφανώς μη ειδικό "lengthFooBarX" είναι μόνο το όνομα μιας μεταβλητής που μπορεί να αλλάξει // σε οποιοδήποτε έγκυρο όνομα μεταβλητής θέλετε στοιχεία.map (( length:lengthFooBArX )) => lengthFooBArX); // // Αυτή η εκχώρηση παραμέτρων αποδομής μπορεί επίσης να γραφτεί όπως φαίνεται παρακάτω. Ωστόσο, σημειώστε ότι σε // αυτό το παράδειγμα δεν εκχωρούμε την τιμή "length" στην κατασκευασμένη ιδιότητα. Αντίθετα, το κυριολεκτικό όνομα // της ίδιας της μεταβλητής `length` χρησιμοποιείται ως η ιδιότητα που θέλουμε να ανακτήσουμε από το αντικείμενο. στοιχεία.χάρτης ((( μήκος )) => μήκος); // Δεν διαχωρίζεται αυτό

Πριν από τις συναρτήσεις βέλους, κάθε νέα συνάρτηση όριζε τη δική της αυτήν την τιμή με βάση τον τρόπο κλήσης της συνάρτησης:

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

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

Function Person() ( // Ο κατασκευαστής Person() ορίζει το "this" ως μια παρουσία του εαυτού του. this.age = 0; setInterval(function growUp() ( // Σε μη αυστηρή λειτουργία, η συνάρτηση growUp() ορίζει " this` // ως το καθολικό αντικείμενο (επειδή εκτελείται το growUp().), // που είναι διαφορετικό από το `this` // που ορίζεται από τον κατασκευαστή Person(). this.age++; ), 1000) ;) var p = new Person();

Στο ECMAScript 3/5, αυτό το ζήτημα μπορούσε να διορθωθεί εκχωρώντας την τιμή σε αυτό σε μια μεταβλητή που θα μπορούσε να κλείσει.

Function Person() ( var that = this; that.age = 0; setInterval(function growUp() ( // Η επανάκληση αναφέρεται στη μεταβλητή "that" της οποίας // η τιμή είναι το αναμενόμενο αντικείμενο. that.age++; ) , 1000); ) "χρήση αυστηρή"; var obj = (a: 10); Object.defineProperty(obj, "b", ( get: () => ( console.log(this.a, typeof this.a, this); // undefined "undefined" Window (...) (ή το καθολικό αντικείμενο) επιστρέφει this.a + 10; // αντιπροσωπεύει το καθολικό αντικείμενο "Window", επομένως το "this.a" επιστρέφει "undefined" ) ));

Χρήση του νέου χειριστή

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

Var Foo = () => (); var foo = new Foo(); // TypeError: Το Foo δεν είναι κατασκευαστής

Χρήση πρωτότυπης ιδιοκτησίας

Οι συναρτήσεις βέλους δεν έχουν ιδιότητα πρωτότυπου.

Var Foo = () => (); console.log(Foo.prototype); // απροσδιόριστο

Χρήση της λέξης-κλειδιού απόδοσης

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

Σώμα λειτουργίας

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

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

Var func = x => x * x; // συνοπτική σύνταξη σώματος, υπονοούμενο "return" var func = (x, y) => ( return x + y; ); // με σώμα μπλοκ, απαιτείται ρητή "επιστροφή".

Επιστροφή αντικειμένων κυριολεκτικά

Λάβετε υπόψη ότι η επιστροφή των literals αντικειμένων χρησιμοποιώντας τις συνοπτικές παραμέτρους σύνταξης σώματος => (object:literal) δεν θα λειτουργήσει όπως αναμένεται.

Var func = () => ( foo: 1 ); // Η κλήση της func() επιστρέφει απροσδιόριστη! var func = () => ( foo: function() () ); // SyntaxError: η δήλωση συνάρτησης απαιτεί όνομα

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

Πρέπει να τυλίξετε το αντικείμενο κυριολεκτικά σε παρένθεση:

Var func = () => (( foo: 1 ));

Διακοπές γραμμής

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

Var func = (a, b, c) => 1; // SyntaxError: αναμενόμενη έκφραση, πήρε "=>"

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

Var func = (a, b, c) => 1; var func = (a, b, c) => (1); var func = (a, b, c) => ( return 1 ); var func = (a, b, c) => 1; // δεν παρουσιάστηκε σφάλμα σύνταξης

Σειρά ανάλυσης

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

Επιτρέψτε την επανάκληση. επανάκληση = επανάκληση || λειτουργία(); // εντάξει επανάκληση = επανάκληση || () => (); // SyntaxError: μη έγκυρα ορίσματα συνάρτησης βέλους ανάκληση = επανάκληση || (() => ()); // Εντάξει

Περισσότερα παραδείγματα // Μια συνάρτηση κενού βέλους επιστρέφει απροσδιόριστο let κενό = () => (); (() => "foobar")(); // Επιστρέφει το "foobar" // (αυτή είναι μια Έκφραση συνάρτησης που έχει κληθεί αμέσως) var simple = a => a > 15 ? 15: α; απλό(16); // 15 simple(10); // 10 έστω max = (a, b) => a > b ? α: β; // Εύκολο φιλτράρισμα πίνακα, αντιστοίχιση, ... var arr = ; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // var double = arr.map(v => v * 2); // // Πιο συνοπτικές αλυσίδες υπόσχεσης υπόσχονται.then(a => ( // ... )).then(b => ( // ... )); // Συναρτήσεις βέλους χωρίς παραμέτρους που είναι οπτικά πιο εύκολο να αναλυθούν setTimeout(() => ( console.log("Συμβαίνει νωρίτερα"); setTimeout(() => ( // βαθύτερος κώδικας console.log("Συμβαίνει αργότερα") ; ), έντεκα); Προδιαγραφές Σχόλιο κατάστασης προδιαγραφών

ECMAScript 2015 (6η Έκδοση, ECMA-262)	Πρότυπο	Αρχικός ορισμός.
Τελευταίο προσχέδιο ECMAScript (ECMA-262) Ο ορισμός των "Ορισμών συνάρτησης βέλους" σε αυτήν την προδιαγραφή.	Προσχέδιο

Συμβατότητα προγράμματος περιήγησης

Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

Ενημερώστε τα δεδομένα συμβατότητας στο GitHub

Διακομιστής φορητών υπολογιστών Chrome Edge Firefox Internet Explorer Opera Safari Android Προβολή ιστού Chrome για Android Firefox για Android Opera για Android Safari σε iOS Samsung Internet Node.jsΛειτουργίες βέλους Ακολουθώντας κόμμα στις παραμέτρους

Πλήρης υποστήριξη Chrome 45

Edge Πλήρης υποστήριξη Ναι

Πλήρης υποστήριξη Firefox 22 Σημειώσεις Πλήρης υποστήριξη 22 Σημειώσεις Σημειώσεις Πριν από τον Firefox 39, ένας τερματιστής γραμμής (\n) επιτρεπόταν εσφαλμένα μετά από ορίσματα συνάρτησης βέλους. Αυτό έχει διορθωθεί για να συμμορφώνεται με την προδιαγραφή ES2015 και τον κώδικα όπως () \n =>

IE Χωρίς υποστήριξη Όχι

Opera Πλήρης υποστήριξη 32

Πλήρης υποστήριξη Safari 10

WebView Android Πλήρης υποστήριξη 45

Πλήρης υποστήριξη Chrome Android 45

Firefox Android Πλήρης υποστήριξη 22 Σημειώσεις Πλήρης υποστήριξη 22 Σημειώσεις Σημειώσεις Η αρχική εφαρμογή των λειτουργιών βέλους στον Firefox τις έκανε αυτόματα αυστηρές. Αυτό έχει αλλάξει από τον Firefox 24. Η χρήση του "χρήση αυστηρή"? απαιτείται πλέον. Σημειώσεις Πριν από τον Firefox 39, ένας τερματιστής γραμμής (\n) επιτρεπόταν εσφαλμένα μετά από ορίσματα συνάρτησης βέλους. Αυτό έχει διορθωθεί για να συμμορφώνεται με την προδιαγραφή ES2015 και ο κώδικας όπως () \n => () θα εμφανίσει τώρα ένα SyntaxError σε αυτήν και σε νεότερες εκδόσεις.

Opera Android Πλήρης υποστήριξη 32

Safari iOS Πλήρης υποστήριξη 10

Samsung Internet Android Πλήρης υποστήριξη 5.0

nodejs Πλήρης υποστήριξη Ναι

Πλήρης υποστήριξη Chrome 58

Ακρη?

Πλήρης υποστήριξη Firefox 52

IE Χωρίς υποστήριξη Όχι

Opera Πλήρης υποστήριξη 45

Σαφάρι?

WebView Android Πλήρης υποστήριξη 58

Πλήρης υποστήριξη Chrome Android 58

Firefox Android Πλήρης υποστήριξη 52

Opera Android Πλήρης υποστήριξη 43

Safari iOS;

Samsung Internet Android Πλήρης υποστήριξη 7.0

nodejs Πλήρης υποστήριξη Ναι

Υπόμνημα Πλήρης υποστήριξη Πλήρης υποστήριξη Χωρίς υποστήριξη Καμία υποστήριξη Άγνωστη συμβατότητα Άγνωστη συμβατότητα Δείτε τις σημειώσεις υλοποίησης. Δείτε τις σημειώσεις υλοποίησης.

• Φροντιστήριο

Ένα από τα πιο ενδιαφέροντα μέρη του νέου προτύπου ECMAScript 6 είναι οι λειτουργίες βέλους. Οι συναρτήσεις βέλους, όπως υποδηλώνει το όνομα, ορίζονται από μια νέα σύνταξη που χρησιμοποιεί ένα βέλος => . Ωστόσο, εκτός από την εξαιρετική σύνταξη, οι συναρτήσεις βέλους διαφέρουν από τις παραδοσιακές συναρτήσεις με άλλους τρόπους:

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

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

Σημείωση: Αυτό το άρθρο είναι μια συλλογή από μια δωρεάν μετάφραση του άρθρου Κατανόηση των λειτουργιών βέλους ECMAScript 6 και μια ανάγνωση του πιο πρόσφατου προσχέδιο της προδιαγραφής (20 Ιανουαρίου 2014 Πρόχειρο Αναθ. 22).

Σύνταξη Γενικά, η σύνταξη των συναρτήσεων βέλους μοιάζει με αυτό:

Var fun = (x) => x;
Μοιάζει πολύ με παρόμοια σύνταξη σε γλώσσες όπως η Scala, η CoffeeScript και η σύνταξη των εκφράσεων λάμδα από το C#.

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

Μία παράμετρος Η δήλωση μιας συνάρτησης βέλους που παίρνει ένα όρισμα και απλά το επιστρέφει είναι πολύ απλό:

Var reflect = value => value; // ισοδύναμο με var reflect = συνάρτηση(τιμή) (επιστρεφόμενη τιμή;)
Όταν μια συνάρτηση βέλους έχει μόνο ένα όρισμα, μπορεί να δηλωθεί χωρίς παρενθέσεις. Το σώμα της συνάρτησης που ακολουθεί το βέλος μπορεί επίσης να μην έχει σγουρά άγκιστρα και να μην περιέχει τη λέξη-κλειδί επιστροφής.

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

Var sum = (num1, num2) => num1 + num2; // ισοδύναμο με var sum = συνάρτηση(num1, num2) (επιστρέφει num1 + num2; );
Η συνάρτηση αθροίσματος απλώς προσθέτει δύο ορίσματα. Η μόνη διαφορά από το προηγούμενο παράδειγμα είναι η παρουσία παρενθέσεων και κόμματος (όπως ακριβώς στις παραδοσιακές συναρτήσεις).

Χωρίς παράμετρους Ομοίως, μια συνάρτηση χωρίς ορίσματα πρέπει να έχει μια κενή λίστα παραμέτρων κλεισμένη σε παρένθεση:

Var sum = () => 1 + 2; // ισοδύναμο με var sum = function() ( return 1 + 2; );

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

Var sum = (num1, num2) => ( return num1 + num2; ) // ισοδύναμο με var sum = συνάρτηση(num1, num2) ( return num1 + num2; );
Το σώμα της συνάρτησης θα υποβληθεί σε επεξεργασία με τον ίδιο ακριβώς τρόπο όπως για τις κλασικές συναρτήσεις, με τη διαφορά ότι οι τιμές ειδικές μεταβλητέςαυτό το , το super και τα επιχειρήματα θα αξιολογηθούν διαφορετικά.

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

Var getTempItem = id => (( id: id, name: "Temp" )); // ισοδύναμο με var getTempItem = function(id) ( return ( id: id, name: "Temp" ) );
Η τοποθέτηση ενός αντικειμένου κυριολεκτικά σε παρένθεση λέει στον αναλυτή ότι οι σγουρές αγκύλες δεν είναι η αρχή της παραδοσιακής σύνταξης για ένα σώμα συνάρτησης, αλλά η αρχή ενός κυριολεκτικού.

Μεταβλητός αριθμός παραμέτρων Δεδομένου ότι το αντικείμενο «εγγενών» ορισμάτων δεν είναι διαθέσιμο μέσα σε μια συνάρτηση βέλους (η τιμή των ορισμάτων σχετίζεται λεξιλογικά με την τιμή των ορισμάτων της παραδοσιακής συνάρτησης εντός της οποίας δηλώθηκε η συνάρτηση βέλους), τότε για συναρτήσεις βέλους με μεταβλητός αριθμός παραμέτρων από τις οποίες χρειάζεστε για να χρησιμοποιήσετε το υπόλοιπο μοτίβο μοτίβα καταστροφής. Παράδειγμα:

Var getTempItems = (...rest) => rest; // ισοδύναμο με var getTempItems = function() ( return .slice.apply(arguments) );

Πρότυπο καταστροφής ως παράμετρος Για τους σκοπούς αυτού του άρθρου, δεν εξετάζουμε τα μοτίβα καταστροφής - μπορείτε να διαβάσετε σχετικά στο άρθρο Επισκόπηση του ECMAScript 6, της επόμενης έκδοσης του JavaScript, αν και αυτές οι πληροφορίες είναι εν μέρει ξεπερασμένες.

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

Var a = ((a)) => a; var b = ([b]) => b;

Χρήση συναρτήσεων βέλους Ρύθμιση περιβάλλοντος Ένα συνηθισμένο σενάριο στη JavaScript είναι η σωστή ρύθμιση αυτής της τιμής μέσα σε μια συνάρτηση (δέσμευση). Επειδή η τιμή αυτού μπορεί να αλλάξει, ανάλογα με το περιβάλλον στο οποίο εκτελείται η συνάρτηση, είναι πιθανό να ενεργήσετε κατά λάθος σε ένα αντικείμενο όταν εννοούσατε κάτι εντελώς διαφορετικό. Δείτε το παρακάτω παράδειγμα:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", function(event) ( this.doSomething(event.type); // error )); ) , doSomething: function( type) ( console.log("Handling " + type + " for " + this.id) ) );
Στον παραπάνω κώδικα, το αντικείμενο pageHandler θα πρέπει να χειρίζεται τα κλικ στη σελίδα. Η μέθοδος init() συνδέει έναν χειριστή στο επιθυμητό συμβάν, το οποίο καλεί εσωτερικά this.doSomething() . Ωστόσο, ο κωδικός δεν θα λειτουργήσει σωστά. Η αναφορά σε this.doSomething() δεν είναι έγκυρη επειδή δείχνει το αντικείμενο εγγράφου μέσα στο πρόγραμμα χειρισμού συμβάντων αντί για το προβλεπόμενο pageHandler . Εάν προσπαθήσετε να εκτελέσετε αυτόν τον κώδικα, θα λάβετε ένα σφάλμα επειδή το αντικείμενο του εγγράφου δεν διαθέτει μέθοδο doSomething.

Μπορείτε να συνδέσετε αυτήν την τιμή στο αντικείμενο pageHandler χρησιμοποιώντας handleEvent ή καλώντας την τυπική μέθοδο bind() στη συνάρτηση:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", (function(event) ( this.doSomething(event.type); // error )).bind(this)) ;) , doSomething: function(type) ( console.log("Handling " + type + " for " + this.id) ) );
Τώρα ο κώδικας λειτουργεί όπως προβλέπεται, αλλά φαίνεται πιο δυσκίνητος. Επιπλέον, καλώντας το bind(this) κάθε φορά δημιουργείτε μια νέα συνάρτηση της οποίας αυτή η τιμή συνδέεται με την τιμή του pageHandler , αλλά ο κώδικας λειτουργεί όπως σκοπεύατε.

Οι συναρτήσεις βέλους λύνουν το πρόβλημα με πιο κομψό τρόπο επειδή χρησιμοποιούν λεξιλογικό δεσμευτικό για την τιμή αυτού (καθώς και super και ορίσματα ) και η τιμή του καθορίζεται από την τιμή αυτού στο σημείο όπου δημιουργήθηκε η συνάρτηση βέλους. Για παράδειγμα:

Var pageHandler = ( id: "123456" , init: function() ( document.addEventListener("click", event => this.doSomething(event.type)); ) , doSomething: function(type) ( console.log( "Handling " + type + " for " + this.id) ) );
Σε αυτό το παράδειγμα, ο χειριστής είναι μια συνάρτηση βέλους που καλεί this.doSomething() . Η τιμή αυτού θα είναι η ίδια όπως στη συνάρτηση init() και ο κώδικας μέσα σε αυτό το παράδειγμαθα λειτουργήσει σωστά, παρόμοια με αυτή που χρησιμοποιούσε bind() . Ανεξάρτητα από το αν η κλήση σε this.doSomething() επιστρέφει μια τιμή ή όχι, η έκφραση μέσα στο σώμα μιας συνάρτησης βέλους δεν χρειάζεται να περικλείεται σε σγουρά άγκιστρα.

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

Var pageHandler = ( id: "123456" , init: function() ( var self = this; document.addEventListener("click", function(event) ( return self.doSomething(event.type) )); ) , doSomething: function(type) ( console.log("Handling " + type + " for " + this.id) ) );
Δηλαδή η δημιουργία δεν γίνεται νέο χαρακτηριστικό, όπως συμβαίνει με την κλήση bind().

"Εκτέλεση" του πλαισίου μεταξύ πολλών κλήσεων Προφανώς, μπορείτε να ενσωματώσετε μια συνάρτηση βέλους μέσα σε μια άλλη, "ρίχνοντας" αυτήν την τιμή μέσω αυτών:

Var obj = ( arr1: , arr2: ["a", "b", "c"] , concatenate: function(a, b)( return a + "|" + b ) , intersection: function() ( return this .arr1.reduce((sum, v1) => // arrow function 1 this.arr2.reduce((sum, v2) => ( // arrow function 2 sum.push(this.concatenate(v1, v2)) return άθροισμα;) , άθροισμα) , ) ) ); var arrSum = obj.intersection();//["1|a", "1|b", "1|c", "2|a", "2|b", "2|c", "3 |α», «3|β», «3|γ»]

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

Var result = values.sort(function(a, b) ( return a - b ));
Αρκετά περίπλοκο για μια απλή λειτουργία. Συγκρίνετε με τη σύντομη σημειογραφία για μια συνάρτηση βέλους:

Var result = values.sort((a, b) => a - b);
Η χρήση μεθόδων όπως array() , map() , reduce() και ούτω καθεξής μπορεί να απλοποιηθεί χρησιμοποιώντας σύνταξη συνάρτησης σύντομου βέλους.

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

• Ο τελεστής τύπου θα επιστρέψει "συνάρτηση" για μια συνάρτηση βέλους
• Μια συνάρτηση βέλους είναι επίσης μια παρουσία της "κλάσης συνάρτησης", επομένως το instanceof θα λειτουργεί το ίδιο όπως με μια παραδοσιακή συνάρτηση
• Μπορείτε ακόμα να χρησιμοποιήσετε τις μεθόδους call() , apply() και bind(), αλλά να θυμάστε ότι δεν θα επηρεάσουν την τιμή αυτού
• Μπορείτε να χρησιμοποιήσετε τη μέθοδο toMethod(), ωστόσο δεν θα αλλάξει την τιμή του super ( η μέθοδος toMethod() εισήχθη στο es6 και δεν καλύπτεται σε αυτό το άρθρο).

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

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

Έστω idGen = (start = 0, id = start, reset = (newId = start) => id = newId, next = () => id++) => ((reset, next)); έστω gen = idGen(100); console.log(gen.next(), gen.next(), gen.reset(10), gen.next());//100 101 10 10
Και το λεξικό δέσιμο θα κλείσει μια από τις μεγαλύτερες πηγές πόνου και απογοήτευσης για τους προγραμματιστές και θα βελτιώσει επίσης την απόδοση χάρη στη βελτιστοποίηση σε επίπεδο κινητήρα js.


Εάν θέλετε να δοκιμάσετε τις λειτουργίες βέλους, μπορείτε να εκτελέσετε τα παραπάνω παραδείγματα στην κονσόλα Firefox, η οποία είναι ενεργοποιημένη αυτή τη στιγμή(02.2014 FF28) υποστηρίζει σχεδόν πλήρως τις συναρτήσεις βέλους (Το FF28 υπολογίζει λανθασμένα την τιμή των ορισμάτων ).

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

Ετικέτες: Προσθήκη ετικετών