Κατανόηση της λέξης-κλειδιού JavaScript "αυτή".

Τι κάνει το Αυτό λέξη-κλειδί σε JavaScript σημαίνει; Και πώς μπορείτε να το χρησιμοποιήσετε πρακτικά στο πρόγραμμα JavaScript; Αυτές είναι μερικές από τις συνήθεις ερωτήσεις που κάνουν οι αρχάριοι και ακόμη και ορισμένοι έμπειροι προγραμματιστές JavaScript Αυτό λέξη-κλειδί.

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

"αυτό" μέσα στο παγκόσμιο πεδίο

Στο παγκόσμιο πλαίσιο, Αυτό θα επιστρέψει το παράθυρο αντικείμενο εφόσον βρίσκεται εκτός συνάρτησης. Καθολικό πλαίσιο σημαίνει ότι δεν το τοποθετείτε μέσα σε μια συνάρτηση.

if(true) {
console.log(this) // returns window object
}
let i = 2
while(i < 10) {
console.log(this) // returns window object till i 9
 i++
}

Εάν εκτελέσετε τον παραπάνω κώδικα, θα λάβετε το αντικείμενο του παραθύρου.

"this" Inside Functions (Μέθοδοι)

Όταν χρησιμοποιείται μέσα σε λειτουργίες, Αυτό αναφέρεται στο αντικείμενο στο οποίο είναι δεσμευμένη η συνάρτηση. Η εξαίρεση είναι όταν χρησιμοποιείτε Αυτό σε μια αυτόνομη συνάρτηση, οπότε επιστρέφει το παράθυρο αντικείμενο. Ας δούμε μερικά παραδείγματα.

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

 
functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley",
 sayName: sayName
}
console.log(me.sayName()) // My name is Kingsley

Αυτό είναι το μου αντικείμενο, λέγοντας έτσι αυτό το όνομα μεσα στην sayName μέθοδος είναι ακριβώς η ίδια με εγώ.όνομα.

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

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

functiontalk() {
returnthis
}
talk() // returns the window object

Κλήση ΜΙΛΑ ρε() είναι το ίδιο με την κλήση window.talk(), και οτιδήποτε βρίσκεται στην αριστερή πλευρά της συνάρτησης θα γίνει αυτόματα Αυτό.

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

Χρησιμοποιώντας "αυτό" με Function.bind()

Μπορεί να υπάρχουν σενάρια όπου δεν μπορείτε απλώς να προσθέσετε τη συνάρτηση σε ένα αντικείμενο ως μέθοδο (όπως στην τελευταία ενότητα).

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

Στο παρακάτω παράδειγμα, το sayName η συνάρτηση δεν είναι μέθοδος στο μου αντικείμενο, αλλά εξακολουθείτε να το δέσετε χρησιμοποιώντας το δένω() λειτουργία:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
const meTalk = sayName.bind(me)
meTalk() // My name is Kingsley

Σε όποιο αντικείμενο και αν περάσεις δένω() θα χρησιμοποιηθεί ως τιμή του Αυτό σε αυτήν την κλήση συνάρτησης.

Συνοπτικά, μπορείτε να χρησιμοποιήσετε δένω() σε οποιαδήποτε συνάρτηση και περάστε σε ένα νέο πλαίσιο (ένα αντικείμενο). Και αυτό το αντικείμενο θα αντικαταστήσει το νόημα του Αυτό μέσα σε αυτή τη λειτουργία.

Χρήση "this" With Function.call()

Τι γίνεται αν δεν θέλετε να επιστρέψετε μια εντελώς νέα συνάρτηση, αλλά απλώς καλέσετε τη συνάρτηση αφού τη συνδέσετε στο περιβάλλον της; Η λύση για αυτό είναι η κλήση() μέθοδος:

functionsayName() {
return`My name is ${this.name}`
}
const me = {
 name: "Kingsley"
}
sayName.call(me) // My name is Kingsley

ο κλήση() μέθοδος εκτελεί αμέσως τη συνάρτηση αντί να επιστρέψει μια άλλη συνάρτηση.

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

functionsayName(lang) {
if (lang "en") {
return`My name is ${this.name}`
 } elseif (lang "it") {
return`Io sono ${this.name}`
 }
}
const me = {
 name: "Kingsley"
}
sayName.call(me, 'en') // My name is Kingsley
sayName.call(me, 'it') // Io sono Kingsley

Όπως μπορείτε να δείτε, μπορείτε απλώς να μεταβιβάσετε οποιαδήποτε παράμετρο θέλετε στη συνάρτηση ως δεύτερο όρισμα στο κλήση() μέθοδος. Μπορείτε επίσης να περάσετε όσες παραμέτρους θέλετε.

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

Συνοψίζοντας, bind(), call() and apply() όλα σας επιτρέπουν να καλείτε συναρτήσεις με ένα εντελώς διαφορετικό αντικείμενο χωρίς να έχετε κάποιο είδος σχέσης μεταξύ των δύο (δηλαδή η συνάρτηση δεν είναι μέθοδος στο αντικείμενο).

"αυτό" Λειτουργίες Inside Constructor

Εάν καλέσετε μια συνάρτηση με α νέος λέξη-κλειδί, δημιουργεί α Αυτό αντικείμενο και το επιστρέφει:

functionperson(name){
this.name = name
}
const me = new person("Kingsley")
const her = new person("Sarah")
const him = new person("Jake")
me.name // Kingsley
her.name // Sarah
him.name // Jake

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

"this" Inside Callback Functions

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

ο Αυτό Η λέξη-κλειδί αναφέρεται σε ένα εντελώς διαφορετικό πλαίσιο όταν χρησιμοποιείται σε λειτουργίες επανάκλησης:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the window object

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

Υπάρχουν δύο τρόποι για να το διορθώσετε. Η πρώτη μέθοδος είναι η χρήση δένω() να δεσμεύει το πρόσωπο συνάρτηση στο νεοκατασκευασμένο αντικείμενο:

functionperson(name){
this.name = name
 setTimeout(function() {
console.log(this)
 }.bind(this), 1000)
}
const me = new person("Kingsley") // returns the me object

Με την παραπάνω τροποποίηση, Αυτό στην επανάκληση θα δείχνει το ίδιο Αυτό ως συνάρτηση κατασκευαστή (το μου αντικείμενο).

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

"this" Inside Arrow Λειτουργίες

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

functionperson(name){
this.name = name
 setTimeout(() => {
console.log(this)
 }, 1000)
}
const me = new person("Kingsley") // returns the me object

Μάθετε περισσότερα για το JavaScript

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