Οι λειτουργίες βέλους εισήχθησαν στο ES6.
Οι συναρτήσεις βέλους μας επιτρέπουν να γράψουμε μικρότερη σύνταξη συνάρτησης:
let myFunction = (a, b) => a * b;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>
</body>
</html>
hello = function() {
return "Hello World!";
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
hello = () => {
return "Hello World!";
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how to use it.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Κονταίνει! Αν η συνάρτηση έχει μόνο μία πρόταση, και τη δήλωση επιστρέφει μια τιμή, μπορείτε να αφαιρέσετε τις αγκύλες και το λέξη-κλειδί return:
hello = () => "Hello World!";Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function without the brackets or the return keyword.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Σημείωση: Αυτό λειτουργεί μόνο εάν η συνάρτηση έχει μόνο μία δήλωση.
Εάν έχετε παραμέτρους, τις περνάτε μέσα στην παρένθεση:
hello = (val) => "Hello " + val;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows an Arrow Function with a parameter.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
Στην πραγματικότητα, εάν έχετε μόνο μία παράμετρο, μπορείτε να παραλείψετε και τις παρενθέσεις:
hello = val => "Hello " + val;Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>
<p id="demo"></p>
<script>
let hello = "";
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>
αυτό;Ο χειρισμός του αυτό είναι επίσης διαφορετικός στις λειτουργίες βέλους σε σύγκριση με τον κανονικό λειτουργίες.
Εν ολίγοις, με τις συναρτήσεις βέλους δεν υπάρχει δέσμευση του αυτό.
Σε κανονικές συναρτήσεις, η λέξη-κλειδί αυτή η αντιπροσώπευε το αντικείμενο που καλούσε το λειτουργία, η οποία θα μπορούσε να είναι το παράθυρο, το έγγραφο, ένα κουμπί ή οτιδήποτε άλλο.
Με τις συναρτήσεις βέλους η αυτή η λέξη-κλειδί πάντα αντιπροσωπεύει το αντίρρηση ότι όρισε τη συνάρτηση βέλους.
Ας ρίξουμε μια ματιά σε δύο παραδείγματα για να κατανοήσουμε τη διαφορά.
Και τα δύο παραδείγματα καλούν μια μέθοδο δύο φορές, πρώτα όταν φορτώνεται η σελίδα και ξανά όταν ο χρήστης κάνει κλικ σε ένα κουμπί.
Το πρώτο παράδειγμα χρησιμοποιεί μια κανονική συνάρτηση και το δεύτερο παράδειγμα χρησιμοποιεί ένα λειτουργία βέλους.
Το αποτέλεσμα δείχνει ότι το πρώτο παράδειγμα επιστρέφει δύο διαφορετικά αντικείμενα (παράθυρο και κουμπί), και το Το δεύτερο παράδειγμα επιστρέφει το αντικείμενο παράθυρο δύο φορές, επειδή το αντικείμενο παράθυρο είναι το «ιδιοκτήτης» της λειτουργίας.
Με μια κανονική συνάρτηση αυτό αντιπροσωπεύει το αντικείμενο που καλεί τη συνάρτηση:
// 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);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>
<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
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);
</script>
</body>
</html>
Με μια συνάρτηση βέλους αυτό αντιπροσωπεύει το κάτοχος της συνάρτησης:
// 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);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript "this"</h1>
<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>
<p>Click the button to execute the "hello" function again, and you will see that "this" still represents the window object.</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
let hello = "";
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);
</script>
</body>
</html>
Θυμηθείτε αυτές τις διαφορές όταν εργάζεστε με λειτουργίες. Μερικές φορές το Η συμπεριφορά των κανονικών συναρτήσεων είναι αυτό που θέλετε, αν όχι, χρησιμοποιήστε τις συναρτήσεις βέλους.
Ο παρακάτω πίνακας ορίζει τις πρώτες εκδόσεις του προγράμματος περιήγησης με πλήρη υποστήριξη για Λειτουργίες βέλους σε JavaScript:
| Chrome 45 | Edge 12 | Firefox 22 | Safari 10 | Opera 32 |
| Sep, 2015 | Jul, 2015 | May, 2013 | Sep, 2016 | Sep, 2015 |