Λειτουργία βέλους JavaScript

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

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

 // function expression let x = function(x, y) ( return x * y; )

μπορεί να γραφτεί ως

 // using arrow functions let x = (x, y) => x * y;

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

Σύνταξη Arrow Function

Η σύνταξη της συνάρτησης βέλους είναι:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Εδώ,

• myFunction είναι το όνομα της συνάρτησης
• arg1, arg2,… argN είναι τα ορίσματα συνάρτησης
• statement(s) είναι το σώμα λειτουργίας

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

 let myFunction = (arg1, arg2,… argN) => expression

Παράδειγμα 1: Λειτουργία βέλους χωρίς επιχείρημα

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

 let greet = () => console.log('Hello'); greet(); // Hello

Παράδειγμα 2: Λειτουργία βέλους με ένα επιχείρημα

Εάν μια συνάρτηση έχει μόνο ένα όρισμα, μπορείτε να παραλείψετε τις παρενθέσεις. Για παράδειγμα,

 let greet = x => console.log(x); greet('Hello'); // Hello 

Παράδειγμα 3: Λειτουργία βέλους ως έκφραση

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

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Παράδειγμα 4: Λειτουργίες βέλους πολλαπλών γραμμών

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

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

αυτό με τη λειτουργία Arrow

Μέσα σε μια κανονική συνάρτηση, αυτή η λέξη-κλειδί αναφέρεται στη συνάρτηση όπου ονομάζεται.

Ωστόσο, thisδεν σχετίζεται με τις λειτουργίες βέλους. Η λειτουργία βέλους δεν έχει τη δική της this. Έτσι, όποτε καλείτε this, αναφέρεται στο πεδίο εφαρμογής του γονέα. Για παράδειγμα,

Μέσα σε μια κανονική λειτουργία

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Παραγωγή

 25 απροσδιόριστο παράθυρο ()

Εδώ, το this.ageεσωτερικό this.sayName()είναι προσβάσιμο γιατί this.sayName()είναι η μέθοδος ενός αντικειμένου.

Ωστόσο, innerFunc()είναι μια κανονική λειτουργία και this.ageδεν είναι προσβάσιμη, επειδή thisαναφέρεται στο καθολικό αντικείμενο (αντικείμενο παραθύρου στο πρόγραμμα περιήγησης). Ως εκ τούτου, this.ageη innerFunc()συνάρτηση δίνει undefined.

Μέσα σε μια λειτουργία βέλους

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Παραγωγή

 25 25

Εδώ, η innerFunc()συνάρτηση ορίζεται χρησιμοποιώντας τη λειτουργία βέλους. Και μέσα στη λειτουργία βέλους, thisαναφέρεται στο πεδίο εφαρμογής του γονέα. Ως εκ τούτου, this.ageδίνει 25 .

Δεσμευτικά επιχειρήματα

Οι τακτικές συναρτήσεις έχουν δεσμευτικά επιχειρήματα. Γι 'αυτό όταν μεταβιβάζετε ορίσματα σε μια κανονική συνάρτηση, μπορείτε να έχετε πρόσβαση σε αυτά χρησιμοποιώντας τη argumentsλέξη-κλειδί. Για παράδειγμα,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Οι συναρτήσεις βέλους δεν έχουν δεσμευτικά επιχειρήματα.

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

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Για να επιλύσετε αυτό το ζήτημα, μπορείτε να χρησιμοποιήσετε τη σύνταξη spread. Για παράδειγμα,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Λειτουργία βέλους με υποσχέσεις και επιστροφές

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

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

μπορεί να γραφτεί ως

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Πράγματα που πρέπει να αποφεύγετε με λειτουργίες βέλους

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

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Δεν μπορείτε να χρησιμοποιήσετε μια λειτουργία βέλους ως κατασκευαστής . Για παράδειγμα,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Σημείωση : Οι λειτουργίες βέλους εισήχθησαν στο ES6 . Ορισμένα προγράμματα περιήγησης ενδέχεται να μην υποστηρίζουν τη χρήση λειτουργιών βέλους. Επισκεφτείτε την υποστήριξη JavaScript Arrow Function για να μάθετε περισσότερα.