Junior
Ποια είναι η διαφορά μεταξύ βελών και κανονικών συναρτήσεων στη JavaScript;
sobes.tech AI
Απάντηση από AI
- Συντακτικό:
- Κανονική συνάρτηση:
function myFunction() { ... } - Βελάκι συνάρτηση:
() => { ... }ήparam => { ... }
- Κανονική συνάρτηση:
- Πλαίσιο
this:- Κανονική συνάρτηση: Το
thisκαθορίζεται από το πλαίσιο κλήσης. - Βελάκι συνάρτηση: Το
thisκληρονομείται λεξικογραφικά από το περιβάλλον (δεν έχει δικό τουthis).
- Κανονική συνάρτηση: Το
- Κατασκευαστές:
- Κανονική συνάρτηση: Μπορεί να χρησιμοποιηθεί ως κατασκευαστής (
new myFunction()). - Βελάκι συνάρτηση: Δεν μπορεί να χρησιμοποιηθεί ως κατασκευαστής.
- Κανονική συνάρτηση: Μπορεί να χρησιμοποιηθεί ως κατασκευαστής (
- Αντικείμενο
arguments:- Κανονική συνάρτηση: Έχει το δικό της αντικείμενο
arguments. - Βελάκι συνάρτηση: Δεν έχει το δικό της
arguments, η πρόσβαση γίνεται μέσω rest παραμέτρων (...args).
- Κανονική συνάρτηση: Έχει το δικό της αντικείμενο
- Ονοματοδοτημένες συναρτήσεις:
- Κανονική συνάρτηση: Μπορεί να είναι ονοματοδοτημένη (
function myFunction() { ... }). - Βελάκι συνάρτηση: Είναι ανώνυμη από προεπιλογή, ανατίθεται σε μεταβλητή (
const myFunction = () => { ... }).
- Κανονική συνάρτηση: Μπορεί να είναι ονοματοδοτημένη (
- Αυτομάτως επιστροφή (implicit return):
- Κανονική συνάρτηση: Απαιτεί ρητό
returnγια την επιστροφή τιμής. - Βελάκι συνάρτηση: Μπορεί να επιστρέφει αυθόρμητα το αποτέλεσμα έκφρασης σε μία γραμμή.
- Κανονική συνάρτηση: Απαιτεί ρητό
Πίνακας σύγκρισης:
| Χαρακτηριστικό | Κανονική συνάρτηση | Βελάκι συνάρτηση |
|---|---|---|
| Συντακτικό | function name() { ... } |
() => { ... } |
Πλαίσιο this |
Δυναμικό (κλήση) | Λεξικογραφικό (από το γονικό πλαίσιο) |
| Κατασκευαστής | Ναι | Όχι |
Αντικείμενο arguments |
Ναι | Όχι (χρησιμοποιεί rest παραμέτρους) |
| Ονοματοδοσία | Μπορεί να είναι ονοματοδοτημένη | Ανώνυμη (ανατίθεται) |
| Αυτομάτως επιστροφή | Όχι (συνήθως απαιτεί return) |
Ναι (για μία γραμμή) |
// Παραδείγματα κανονικών συναρτήσεων
function standardFunction() {
console.log(this); // Εξαρτάται από το πλαίσιο κλήσης
console.log(arguments); // Διαθέσιμο αντικείμενο arguments
}
const obj = {
method: standardFunction
};
standardFunction(); // this θα είναι window ή undefined
obj.method(); // this θα είναι το obj
new standardFunction(); // this θα είναι νέο αντικείμενο
// Παραδείγματα βελάκι συναρτήσεων
const arrowFunction = () => {
console.log(this); // Κληρονομεί το this από το γονικό πλαίσιο
// console.log(arguments); // Σφάλμα, το arguments δεν είναι διαθέσιμο
};
const outerObj = {
outerMethod: function() {
const innerArrowFunction = () => {
console.log(this); // Κληρονομεί το this από το outerMethod (το outerObj)
};
innerArrowFunction();
}
};
arrowFunction(); // this θα είναι το window ή {} (στο Node.js)
outerObj.outerMethod(); // this μέσα στο innerArrowFunction θα είναι το outerObj
// Αυτομάτως επιστροφή σε βελάκι
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5
// Κανονική συνάρτηση με ρητή επιστροφή
function multiply(a, b) {
return a * b;
}
console.log(multiply(2, 3)); // 6
// Βελάκι δεν μπορεί να είναι κατασκευαστής
// new arrowFunction(); // Σφάλμα: TypeError