Συναρτήσεις βέλους και η λέξη-κλειδί "this" σε JavaScript

Home » Python » Συναρτήσεις βέλους και η λέξη-κλειδί "this" σε JavaScript

Αν έχετε συνδεθεί ποτέ this σε διαφορετικές συναρτήσεις JavaScript και έχετε λάβει εντελώς διαφορετικά αποτελέσματα, δεν είστε οι μόνοι. Πολλοί προγραμματιστές αντιμετωπίζουν περιπτώσεις όπου μια μέθοδος εκτυπώνει το αναμενόμενο αντικείμενο, μια συνάρτηση βέλους εκτυπώνει windowκαι ένα ένθετο βέλος ξαφνικά «μαγικά» δείχνει πίσω στο περιβάλλον αντικείμενο. Η κατανόηση του γιατί συμβαίνει αυτό είναι το κλειδί για τη σύνταξη προβλέψιμου κώδικα χωρίς σφάλματα.

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

Σύνταξη συνάρτησης βέλους χωρίς σύγχυση

Οι συναρτήσεις βέλους είναι παραστάσεις συνάρτησης γραμμένες με την => σύνταξη αντί για το function λέξη-κλειδί. Εννοιολογικά, μπορείτε να τα σκεφτείτε ως έναν συνοπτικό τρόπο γραφής: «πάρτε αυτές τις παραμέτρους, αξιολογήστε αυτήν την έκφραση ή το μπλοκ κώδικα και επιστρέψτε μια τιμή». Από κάτω, εξακολουθούν να είναι συναρτήσεις, αλλά συμπεριφέρονται διαφορετικά με διάφορους σημαντικούς τρόπους.

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

const multiplyByTwo = function (value) { return value * 2; };

Μπορεί να ξαναγραφεί ως συνάρτηση βέλους ως εξής:

const multiplyByTwo = (value) => { return value * 2; };

Οι συναρτήσεις βέλους λάμπουν όταν το σώμα είναι μία μόνο έκφραση. Αν το σώμα είναι απλώς μία εντολή που επιστρέφει κάτι, μπορείτε να παραλείψετε τόσο τις αγκύλες όσο και την ρητή return, επιτρέποντας μια έμμεση επιστροφή:

const multiplyByTwo = value => value * 2;

Όταν υπάρχει ακριβώς μία παράμετρος, μπορείτε να παραλείψετε τις γύρω παρενθέσεις, αλλά μόνο σε αυτήν τη συγκεκριμένη περίπτωση. So x => x * 2 είναι έγκυρο, αλλά αν έχετε μηδενικές ή πολλαπλές παραμέτρους, πρέπει να κρατήσετε τις παρενθέσεις:

• Μηδενικές παράμετροι: () => 42
• Μία παράμετρος: x => x * 2 or (x) => x * 2
• Δύο ή περισσότερες παράμετροι: (x, y) => x + y

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

const feedCat = (status) => {
if (status === 'hungry') {
return 'Feed the cat';
} else {
return 'Do not feed the cat';
}
};

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

const toObject = value => ({ result: value });

Ένα ακόμα πράγμα: οι συναρτήσεις βέλους είναι πάντα εκφράσεις, ποτέ δηλώσεις. Αυτό σημαίνει ότι πρέπει να αντιστοιχιστούν σε μια μεταβλητή, μια ιδιότητα ή να περαστούν ως όρισμα. Δεν μπορούν να σταθούν μόνα τους όπως function myFunc() {}, και δεν ανυψώνονται με τον ίδιο τρόπο όπως οι δηλώσεις συναρτήσεων, επομένως δεν μπορείτε να τις καλέσετε πριν οριστούν.

Τι ακριβώς είναι this σε JavaScript;

Η λέξη κλειδί this είναι μια δυναμική σύνδεση που δημιουργεί η JavaScript για εσάς όταν εκτελεί μια συνάρτηση ή μια μέθοδο κλάσης. Μπορείτε να το θεωρήσετε ως μια αόρατη παράμετρο της οποίας η τιμή εξαρτάται από το πώς και πού καλείται η συνάρτηση. Αυτό το καθιστά ισχυρό και ευέλικτο, αλλά και μια μεγάλη πηγή σύγχυσης.

Σε μια μη αυστηρή συνάρτηση, this πάντα αναλύεται σε κάποιο είδος αντικειμένου. σε αυστηρή λειτουργία μπορεί να είναι κυριολεκτικά οποιαδήποτε τιμή, συμπεριλαμβανομένης undefined. Η JavaScript αποφασίζει αυτήν την τιμή με βάση το περιβάλλον εκτέλεσης: κανονική συνάρτηση, κλήση μεθόδου, κλήση κατασκευαστή, κλάση, καθολικό πεδίο εφαρμογής ή συνάρτηση βέλους.

Στο ανώτατο επίπεδο ενός κλασικού σεναρίου (όχι μιας ενότητας), this αναφέρεται σε globalThis, το οποίο συνήθως είναι το πρόγραμμα περιήγησης window αντικείμενο. Έτσι, η ακόλουθη σύγκριση σε ένα πρόγραμμα περιήγησης θα είναι αληθής:

console.log(this === window); // true

Σε συναρτήσεις που δεν είναι βέλη, this καθορίζεται εξ ολοκλήρου από τον χώρο κλήσης. Αν καλέσετε obj.method(), έπειτα μέσα method η αξία this is objΑν πάρετε την ίδια συνάρτηση και την καλέσετε αυτόνομα ως fn() σε αυστηρή λειτουργία, this γίνεται undefined; σε μη αυστηρή λειτουργία, η JavaScript «αντικαθιστά» this μαζί σου, globalThis.

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

Υπάρχουν επίσης εργαλεία για τον έλεγχο this ρητά: call, apply, bindκαι Reflect.apply. Αυτά σας επιτρέπουν να «εισφέρετε» το επιθυμητό this αξία: fn.call(obj, arg1, arg2) θα εκτελέσει fn μαζί σου, this οριστεί σε objΟι ίδιοι κανόνες αντικατάστασης ισχύουν και σε μη αυστηρή λειτουργία: αν περάσετε null or undefined as this, αντικαθίστανται με globalThis; τα πρωτόγονα περιβάλλοντα εγκλωβίζονται στα αντικείμενα περιτύλιξής τους.

Οι επανακλήσεις προσθέτουν ένα ακόμη επίπεδο έμμεσης προσέγγισης, επειδή this ελέγχεται από όποιον καλεί την επανάκλησή σας. Μέθοδοι επανάληψης πινάκων, οι Promise Ο κατασκευαστής και παρόμοια API συνήθως καλούν τις επανακλήσεις με this οριστεί σε undefined (ή το καθολικό αντικείμενο σε λειτουργία sloppy). Ορισμένα API, όπως Array.prototype.forEach or Set.prototype.forEach, αποδέχεστε ξεχωριστό thisArg παράμετρος που μπορείτε να χρησιμοποιήσετε για να ορίσετε την επανάκληση this.

Άλλα API καλούν σκόπιμα τις επανακλήσεις με προσαρμοσμένο τρόπο this αξιών. Για παράδειγμα, η reviver επιχείρημα προς JSON.parse και την replacer για JSON.stringify λαμβάνω this συνδεδεμένο με το αντικείμενο που κατέχει την ιδιότητα που βρίσκεται υπό επεξεργασία. Οι χειριστές συμβάντων στο DOM είναι συνδεδεμένοι με το στοιχείο στο οποίο συνδέονται όταν γράφονται με τον «κλασικό» τρόπο.

Η βασική ιδέα: οι συναρτήσεις βέλους δεν δημιουργούν τις δικές τους this

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

Στην πράξη, μια συνάρτηση βέλους συμπεριφέρεται σαν να ήταν μόνιμα αυτόματα συνδεδεμένη με το this του εξωτερικού του πεδίου εφαρμογής. Γι' αυτό και μέθοδοι όπως call, applyκαι bind δεν μπορώ να αλλάξω this για μια συνάρτηση βέλους: η thisArg το όρισμα απλώς αγνοείται. Μπορείτε ακόμα να περάσετε κανονικές παραμέτρους μέσω αυτών, αλλά το this η τιμή είναι κλειδωμένη.

Σκεφτείτε αυτό το τμήμα κειμένου στο καθολικό πεδίο εφαρμογής ενός αρχείου σεναρίου:

const arrow = () => console.log(this);
arrow();

Επειδή το βέλος ορίζεται σε καθολικό κώδικα, του this είναι το παγκόσμιο this (τυπικά window σε ένα σενάριο προγράμματος περιήγησης), και αυτό δεν αλλάζει ποτέ. κλήση arrow ως απλή συνάρτηση, η ανάθεσή της σε μια ιδιότητα ή η μεταβίβασή της θα καταγράφει πάντα το ίδιο καθολικό αντικείμενο όταν καλείται σε αυτό το περιβάλλον.

Η πραγματικά ενδιαφέρουσα συμπεριφορά εμφανίζεται όταν ενθέτετε συναρτήσεις βέλους μέσα σε κανονικές συναρτήσεις ή μεθόδους. Δεδομένου ότι το βέλος καταγράφει την εξωτερική συνάρτηση this, γίνεται ένα ισχυρό εργαλείο για επανακλήσεις που πρέπει να ανατρέξουν στο αντικείμενο που τις περιέχει χωρίς τη συνήθη .bind(this) τελετή.

const counter = {
id: 42,
start() {
setTimeout(() => {
console.log(this.id); // uses counter.id
}, 1000);
},
};

If start χρησιμοποιούσαν μια παραδοσιακή ανώνυμη συνάρτηση μέσα setTimeout, θα χρειαστεί να συνδέσετε χειροκίνητα this ή αποθηκεύστε το σε μια μεταβλητή. Με τα βέλη, η επανάκληση κληρονομεί φυσικά το this από start, Η οποία είναι counter, Οπότε this.id εκτυπώσεις 42 όπως προορίζεται.

Αυτή η λεξιλογική σύνδεση εξηγεί επίσης το κλασικό «γιατί κάνει this ερώτηση "αλλαγή" κατά τη χρήση βελών σε κυριολεκτικά αντικείμενα. Κοιτάξτε αυτά τα δύο αντικείμενα:

const obj1 = {
speak() {
console.log(this);
}
};

const obj2 = {
speak: () => {
console.log(this);
}
};

κλήση obj1.speak() εκτυπώσεις obj1, Επειδή speak είναι μια τακτική μέθοδος και this ορίζεται με βάση τον ιστότοπο κλήσης. Σε αντίθεση, obj2.speak() καταγράφει το εξωτερικό this (συχνά window σε προγράμματα περιήγησης), επειδή το βέλος δεν χρησιμοποιεί το αντικείμενο ως το thisΗ ίδια η κυριολεκτική έκφραση του αντικειμένου δεν δημιουργεί ένα νέο this πεδίο εφαρμογής; μόνο το σώμα της συνάρτησης το κάνει αυτό και οι συναρτήσεις βέλους παραλείπουν αυτό το βήμα.

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

const obj3 = {
speak() {
(() => {
console.log(this);
})();
}
};

obj3.speak();

Σε αυτήν την περίπτωση, η συνάρτηση εσωτερικού βέλους κληρονομεί this από speak, Η οποία είναι obj3 όταν ονομάζεται ως obj3.speak(). Παρόλο που το βέλος είναι μια ένθετη, άμεσα κλητέα συνάρτηση, εξακολουθεί να δείχνει προς obj3, όχι το καθολικό αντικείμενο. Αυτή είναι η ουσία του λεξιλογικού this: ακολουθεί το περιβάλλον παλμογράφο, όχι την τοποθεσία κλήσης του ίδιου του βέλους.

this σε συναρτήσεις, αντικείμενα και κατασκευαστές

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

Σε μια απλή συνάρτηση (χωρίς βέλος), this εξαρτάται 100% από τον τρόπο που καλείται η συνάρτηση. Αν καλέσετε fn() σε αυστηρή λειτουργία, this is undefined; σε ατημέλητη λειτουργία, η αντικατάσταση κάνει this γίνονται globalThisΑν καλέσετε obj.fn(), Τότε this is obj. Μετακίνηση fn σε ένα διαφορετικό αντικείμενο ή σε μια μεταβλητή και την τιμή του this θα κινηθεί αναλόγως.

Σε μια μέθοδο που ορίζεται σε ένα literal αντικειμένου, this είναι το αντικείμενο στο οποίο γίνεται πρόσβαση στη μέθοδο, όχι απαραίτητα αυτό στο οποίο ορίστηκε αρχικά η μέθοδος. If obj.__proto__ κρατάει μια μέθοδο και την καλείς obj.method(), έπειτα μέσα method, this is obj, όχι το πρωτότυπο.

Οι κατασκευαστές είναι μια άλλη ειδική περίπτωση: όταν καλείτε μια συνάρτηση με new, this είναι συνδεδεμένο με την πρόσφατα δημιουργημένη παρουσία αντικειμένου. Για παράδειγμα, στο function User(name) { this.name = name; }, καλώντας new User('Alex') σύνολα this στο νέο User αντικείμενο. Εάν ο κατασκευαστής επιστρέψει ρητά ένα μη πρωτόγονο αντικείμενο, αυτό το αντικείμενο που επιστρέφεται αντικαθιστά this ως τελική τιμή του new έκφραση.

Η σύνταξη της κλάσης βασίζεται σε αυτούς τους κανόνες με δύο κύρια περιβάλλοντα: την παρουσία και το στατικό. Μέσα σε έναν κατασκευαστή ή μια μέθοδο παρουσίας, this δείχνει στην περίπτωση κλάσης με την οποία εργάζεστε. Μέσα σε στατικές μεθόδους ή μπλοκ στατικής αρχικοποίησης, this αναφέρεται στην ίδια την κλάση (ή στην παράγωγη κλάση όταν καλείται μέσω κληρονομικότητας). Τα πεδία στιγμιοτύπων αξιολογούνται με this συνδεδεμένο με τη νέα παρουσία· στατικά πεδία βλ. this ως κατασκευαστής κλάσης.

Οι κατασκευαστές παράγωγων κλάσεων συμπεριφέρονται ελαφρώς διαφορετικά: μέχρι να καλέσετε super(), δεν υπάρχει χρησιμοποιήσιμο this. Επανάκληση super() αρχικοποιεί this με ανάθεση στον βασικό κατασκευαστή. Η επιστροφή πριν από την εκτέλεση αυτής της διαδικασίας σε έναν παράγωγο κατασκευαστή επιτρέπεται μόνο εάν επιστρέψετε ρητά ένα διαφορετικό αντικείμενο.

Στο παγκόσμιο πλαίσιο, this εξαρτάται από το πώς το περιβάλλον JavaScript αναδιπλώνει και εκτελεί τον κώδικά σας. Σε ένα κλασικό σενάριο προγράμματος περιήγησης, ανώτατου επιπέδου this είναι το καθολικό αντικείμενο· σε μια ενότητα ES, ανώτατου επιπέδου this είναι πάντα undefinedΟι ενότητες Node.js CommonJS είναι εσωτερικά τυλιγμένες και συνήθως εκτελούνται με this οριστεί σε module.exports. Χαρακτηριστικά χειριστή ενσωματωμένων συμβάντων σε HTML εκτελούνται με this οριστεί στο στοιχείο στο οποίο είναι συνδεδεμένα.

Μια ανεπαίσθητη αλλά σημαντική λεπτομέρεια: οι ίδιες οι κυριολεκτικές μεταβλητές αντικειμένων δεν εισάγουν κάτι νέο. this πεδίο εφαρμογής. Γραφή const obj = { value: this }; μέσα σε ένα σενάριο θα κάνει obj.value ίσο με το εξωτερικό this, όχι το αντικείμενο. Μόνο τα σώματα συναρτήσεων (και τα σώματα κλάσης) δημιουργούν ένα αποκλειστικό this σύνδεση· τα βέλη παραλείπουν σκόπιμα αυτό το βήμα και κληρονομούν.

Γιατί οι συναρτήσεις βέλους είναι εξαιρετικές για επανακλήσεις (και πότε δεν είναι)

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

Φανταστείτε μια μέθοδο που χρειάζεται να ενημερώνει επανειλημμένα κάποια ιδιότητα χρησιμοποιώντας setInterval. Χρησιμοποιώντας μια παραδοσιακή συνάρτηση, this μέσα στην επανάκληση θα ήταν προεπιλεγμένο το καθολικό αντικείμενο (ή θα ήταν undefined σε αυστηρή λειτουργία), έτσι this.count δεν θα έδειχνε στην παρουσία σας. Με μια συνάρτηση βέλους, η επανάκληση χρησιμοποιεί φυσικά το this της εξωτερικής μεθόδου.

function Counter() {
this.count = 0;

setInterval(() => {
this.count++;
}, 1000);
}

Χάρη στο βέλος, this εντός του διαστήματος η επανάκληση αναφέρεται στο Counter παράδειγμα, όχι window. Αν αυτή η επανάκληση ήταν μια κανονική συνάρτηση, θα χρειαζόσασταν είτε .bind(this) ή μια ενδιάμεση μεταβλητή όπως const self = this; για να διατηρήσετε την αναφορά.

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

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

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

Σκεφτείτε ένα αντικείμενο που παρακολουθεί τη ζωή μιας γάτας:

const cat = {
lives: 9,
jump: () => {
this.lives--; // bug: this is not cat
},
};

cat.jump();

Από jump είναι ένα βέλος, this δεν αναφέρεται σε cat αλλά σε οτιδήποτε this ήταν το σημείο όπου δημιουργήθηκε η κυριολεκτική γραμμή αντικειμένου (συχνά το καθολικό αντικείμενο). Το επιδιωκόμενο this.lives-- είτε ρίχνει (σε ​​αυστηρή λειτουργία) είτε μεταλλάσσει αθόρυβα κάτι άσχετο. Η χρήση μιας κανονικής σύνταξης μεθόδου εδώ είναι η σωστή κίνηση.

Οι ακροατές συμβάντων DOM είναι παρόμοιοι: το τυπικό μοτίβο this.classList.toggle('on') μέσα σε μια επανάκληση συμβάντος βασίζεται σε this όντας το στοιχείο που πυροδότησε το συμβάν. Με μια συνάρτηση βέλους, this δεν δείχνει πλέον στο στοιχείο, επομένως ο κώδικας σπάει.

const button = document.getElementById('press');

button.addEventListener('click', () => {
this.classList.toggle('on'); // this is not button
});

Σε αυτήν την περίπτωση, ο χειριστής θα πρέπει να λειτουργεί κανονικά, έτσι ώστε this είναι συνδεδεμένο από το πρόγραμμα περιήγησης με το στοιχείο κουμπιού. Οι συναρτήσεις βέλους απλώς δεν λειτουργούν ως υποκατάστατα drop-in εάν η λογική σας προβλέπει this να είναι ο στόχος του δυναμικού συμβάντος.

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

Ειδικές περιπτώσεις: getters, setters, bound methods και odd corners

Οι Getters και οι Setters ακολουθούν τον ίδιο κανόνα «τοποθεσίας κλήσης»: this είναι το αντικείμενο στο οποίο γίνεται πρόσβαση στην ιδιότητα, όχι αυτό στο οποίο ορίστηκε αρχικά. Εάν ένας getter κληρονομείται από ένα πρωτότυπο και τον καλέσετε σε ένα παράγωγο αντικείμενο, this μέσα στον getter αναφέρεται στο παράγωγο αντικείμενο.

Δεσμευμένες μέθοδοι που δημιουργήθηκαν με Function.prototype.bind σας δίνουν συμπεριφορά κάπως παρόμοια με τις συναρτήσεις βέλους, αλλά στο επίπεδο των κανονικών συναρτήσεων. Όταν καλείτε f.bind(obj), δημιουργείτε μια νέα συνάρτηση της οποίας this είναι μόνιμα στερεωμένο σε obj, ανεξάρτητα από το πώς καλείται. Αυτό μπορεί να είναι χρήσιμο σε κλάσεις όταν χρειάζεται να διατηρήσετε this ακόμη και αν μια μέθοδος είναι αποσπασματική.

class Example {
constructor() {
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
console.log(this); // always the instance
}
}

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

Υπάρχουν επίσης ορισμένες παλαιότερες γωνιακές θήκες όπου this συμπεριφέρεται διαφορετικά, όπως μέσα σε ένα απαρχαιωμένο with δήλωση. Μέσα α with (obj) { ... } μπλοκ, καλώντας μια συνάρτηση που είναι μια ιδιότητα του obj συμπεριφέρεται αποτελεσματικά σαν να το είχατε γράψει obj.method(), Οπότε this είναι βέβαιο ότι θα objΟ σύγχρονος κώδικας θα πρέπει να αποφεύγει with, αλλά η κατανόηση αυτής της εξαίρεσης διευκρινίζει ότι this εξακολουθεί να εξαρτάται ουσιαστικά από το πώς σχηματίζεται μια κλήση συνάρτησης.

Οι ενσωματωμένοι χειριστές συμβάντων στην HTML έχουν επίσης έναν ειδικό κανόνα: ο περιβάλλοντας κώδικας ενσωματωμένου χειριστή βλέπει this ως το στοιχείο, αλλά οι εσωτερικές συναρτήσεις που ορίζονται μέσα σε αυτόν τον χειριστή επιστρέφουν στην κανονική this κανόνες. Έτσι, μια εσωτερική παραδοσιακή συνάρτηση, που δεν συνδέεται με τίποτα, συνήθως θα βλέπει this as globalThis (Ή undefined σε αυστηρή λειτουργία), όχι το στοιχείο.

Τέλος, να θυμάστε ότι οι συναρτήσεις βέλους δεν έχουν prototype ιδιότητα και δεν μπορούν να χρησιμοποιηθούν ως κατασκευαστές με new. Προσπάθεια new MyArrow() θα ρίξει ένα σφάλμα τύπου (TypeError). Εάν χρειάζεστε μια συνάρτηση που μπορεί να λειτουργήσει ως κατασκευαστής, πρέπει να χρησιμοποιήσετε μια κανονική συνάρτηση ή μια κλάση.

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

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