47. Συνάρτηση βέλους (Arrow Function) JavaScript

JS Arrow Function


Οι συναρτήσεις βέλους εισήχθησαν στο ES6.

Οι συναρτήσεις βέλους μας επιτρέπουν να γράψουμε σύντομη σύνταξη συναρτήσεων:

Πριν:

hello = function() {
  return "Hello World!";
}

Δοκιμάστε τον εαυτό σας »

Με τη συνάρτηση βέλους:

hello = () => {
  return "Hello World!";
}

Δοκιμάστε τον εαυτό σας »

Γίνεται πιο σύντομη! Εάν η συνάρτηση έχει μόνο μία δήλωση και η πρόταση επιστρέφει μια τιμή, μπορείτε να καταργήσετε τις παρενθέσεις και τη λέξη-κλειδί return:

Συναρτήσεις βέλους Τιμή επιστροφής από προεπιλογή:

Σημείωση: Αυτό λειτουργεί μόνο εάν η συνάρτηση έχει μόνο μία δήλωση.

Αν έχετε παραμέτρους, τις περνάτε μέσα στις παρενθέσεις:

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

hello = (val) => "Hello " + val;

Δοκιμάστε τον εαυτό σας »

Στην πραγματικότητα, αν έχετε μόνο μία παράμετρο, μπορείτε επίσης να παραλείψετε τις παρενθέσεις:

Συνάρτηση βέλους χωρίς παρενθέσεις:


Τι γίνεται με το this;

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

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

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

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

Ας ρίξουμε μια ματιά σε δύο παραδείγματα για να κατανοήσουμε τη διαφορά.

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

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

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

Παράδειγμα

Σε μια κανονική συνάρτηση το this αντιπροσωπεύει το αντικείμενο που καλεί τη συνάρτηση:

//Regular Function:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

Δοκιμάστε τον εαυτό σας »

Παράδειγμα

Σε μια συνάρτηση βέλους το this αντιπροσωπεύει τον ιδιοκτήτη της συνάρτησης:

//Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

//The window object calls the function:
window.addEventListener("load", hello);

//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);

Δοκιμάστε τον εαυτό σας »

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


Υποστήριξη προγραμμάτων περιήγησης

Ο παρακάτω πίνακας ορίζει τις πρώτες εκδόσεις του προγράμματος περιήγησης με πλήρη υποστήριξη για τις συναρτήσεις βέλους στη JavaScript:

Chrome 45Edge 12Firefox 22Safari 10Opera 32
Sep, 2015Jul, 2015May, 2013Sep, 2016Sep, 2015

47. Συνάρτηση βέλους (Arrow Function) JavaScript

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

This website uses cookies to ensure you get the best experience on our website. By continuing to use this website, you agree to their use. To find out more, see here: Privacy Policy
Αρέσει σε %d bloggers: