8.5 Η λέξη κλειδί this στην JavaScript

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

Η τιμή του this εξαρτάται από τον τρόπο με τον οποίο καλείται η μέθοδος ή η συνάρτηση. Εδώ υπάρχουν μερικά παραδείγματα που δείχνουν πώς χρησιμοποιείται το this:

1. Μέθοδος αντικειμένου:

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // Εμφανίζει: "John Doe"

2. Κλήση συνάρτησης:

function greet() {
  console.log("Hello, " + this.firstName);
}

var person1 = {
  firstName: "John"
};

var person2 = {
  firstName: "Alice"
};

greet.call(person1); // Εμφανίζει: "Hello, John"
greet.call(person2); // Εμφανίζει: "Hello, Alice"

Στο παράδειγμα 1, το this αναφέρεται στο αντικείμενο person, επιτρέποντας την πρόσβαση στις ιδιότητες firstName και lastName μέσα στη μέθοδο fullName.

Στο παράδειγμα 2, το this παίρνει την τιμή του πρώτου ορίσματος που περνάμε στην call() μέθοδο. Αυτό μας επιτρέπει να εκτελέσουμε τη συνάρτηση greet με τον κατάλληλο προσδιορισμό για το this.

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

Το this είναι μια λέξη-κλειδί στη JavaScript που αναφέρεται σε ένα αντικείμενο.

Ποιο αντικείμενο εξαρτάται από τον τρόπο με τον οποίο χρησιμοποιείται ή καλείται το this.

Το this αναφέρεται σε διάφορα αντικείμενα ανάλογα με το πώς χρησιμοποιείται:

1. Σε μια μέθοδο αντικειμένου, το this αναφέρεται στο ίδιο το αντικείμενο.
2. Όταν χρησιμοποιείται μόνο του, το this αναφέρεται στο παγκόσμιο αντικείμενο (global object), όπως το window στο περιβάλλον του προγράμματος περιήγησης.
3. Σε μια συνάρτηση, το this αναφέρεται επίσης στο παγκόσμιο αντικείμενο.
4. Σε μια συνάρτηση, σε αυστηρή λειτουργία (strict mode), το this είναι undefined.
5. Σε ένα γεγονός (event), το this αναφέρεται στο στοιχείο που έλαβε το γεγονός.
6. Μέθοδοι όπως το call(), το apply() και το bind() μπορούν να αναφέρουν το this σε οποιοδήποτε αντικείμενο.

Αυτή η συμπεριφορά του this επιτρέπει την ευελιξία και τη δυνατότητα προσαρμογής της συμπεριφοράς του κώδικα βάσει του περιβάλλοντος εκτέλεσης και του τρόπου κλήσης.

[adinserter block=”2″]

Όταν χρησιμοποιείται σε μια μέθοδο αντικειμένου, το this αναφέρεται στο ίδιο το αντικείμενο.

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

Αυτό συμβαίνει επειδή η μέθοδος fullName είναι μια μέθοδος του αντικειμένου person.

Ένα παράδειγμα κώδικα που δείχνει πώς το this λειτουργεί σε μια μέθοδο αντικειμένου:

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // Εμφανίζει: "John Doe"

Στο παραπάνω παράδειγμα, έχουμε ένα αντικείμενο με το όνομα person. Το αντικείμενο έχει δύο ιδιότητες, το firstName και το lastName, και μια μέθοδο με το όνομα fullName.

Η μέθοδος fullName χρησιμοποιεί το this για να αναφερθεί στο ίδιο το αντικείμενο person. Μέσα στη μέθοδο, το this.firstName αναφέρεται στην ιδιότητα firstName του αντικειμένου person, και το this.lastName αναφέρεται στην ιδιότητα lastName.

Καλώντας τη μέθοδο fullName με τη χρήση του person.fullName(), παίρνουμε το πλήρες όνομα του ατόμου από τις ιδιότητες firstName και lastName, και το εμφανίζουμε στην κονσόλα. Έτσι, το αποτέλεσμα που θα δούμε είναι "John Doe".

Όταν χρησιμοποιείται μόνο του, το this αναφέρεται στο παγκόσμιο αντικείμενο (global object).

Αυτό συμβαίνει επειδή η χρήση του this γίνεται στο παγκόσμιο επίπεδο (global scope).

Παρακάτω έχετε ένα παράδειγμα κώδικα που δείχνει πώς το this λειτουργεί όταν χρησιμοποιείται μόνο του, δηλαδή στο παγκόσμιο επίπεδο (global scope):

console.log(this); // Εξαρτώμενο από το περιβάλλον εκτέλεσης (π.χ. browser, Node.js)

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

Σε μια συνάρτηση, το παγκόσμιο αντικείμενο είναι η προεπιλεγμένη σύνδεση (binding) για το this.

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

Εδώ έχετε ένα παράδειγμα κώδικα που δείχνει πώς το this λειτουργεί σε μια συνάρτηση:

function greet() {
  console.log("Hello from " + this); // Εξαρτώμενο από το περιβάλλον εκτέλεσης
}

greet(); // Εμφανίζει: "Hello from [object global]" (σε περιβάλλον περιήγησης)

Σε αυτό το παράδειγμα, η συνάρτηση greet καλείται χωρίς καμία συγκεκριμένη σύνδεση για το this, οπότε το this αναφέρεται στο παγκόσμιο αντικείμενο του περιβάλλοντος εκτέλεσης (global object).

Παρακαλώ σημειώστε ότι το ακριβές αντικείμενο στο οποίο αναφέρεται το this εξαρτάται από το περιβάλλον εκτέλεσης (π.χ. browser, Node.js).

Η αυστηρή λειτουργία (strict mode) της JavaScript δεν επιτρέπει την προεπιλεγμένη σύνδεση (default binding) για το this.

Για αυτό τον λόγο, όταν χρησιμοποιείτε το this σε μια συνάρτηση και έχετε ενεργοποιήσει την αυστηρή λειτουργία, το this θα είναι undefined.

Εδώ έχετε ένα παράδειγμα κώδικα που δείχνει πώς το this λειτουργεί σε μια συνάρτηση σε αυστηρή λειτουργία:

"use strict";

function showThis() {
  console.log(this);
}

showThis(); // Εμφανίζει: undefined

Σε αυτό το παράδειγμα, η συνάρτηση showThis καλείται χωρίς καμία συγκεκριμένη σύνδεση για το this και είναι ενεργοποιημένη η αυστηρή λειτουργία. Ως αποτέλεσμα, το this είναι undefined.

[adinserter block=”3″]

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

Στα χειριστές συμβάντων του HTML, το this αναφέρεται στο στοιχείο του HTML που έλαβε το συμβάν (event):

Εδώ έχετε ένα παράδειγμα κώδικα που δείχνει πώς το this λειτουργεί σε έναν χειριστή συμβάντος HTML:

<button id="myButton">Click me</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
  console.log(this); // Αναφέρεται στο στοιχείο <button>
});
</script>

Σε αυτό το παράδειγμα, έχουμε ένα κουμπί HTML με το id “myButton”. Χρησιμοποιούμε τη μέθοδο addEventListener για να προσθέσουμε έναν χειριστή συμβάντος για το κλικ του κουμπιού. Μέσα στη συνάρτηση χειρισμού, το this αναφέρεται στο στοιχείο HTML που έλαβε το συμβάν, δηλαδή το κουμπί.

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

Στα παρακάτω παραδείγματα, το this αναφέρεται στο αντικείμενο person:

Παράδειγμα 1: Μέθοδος αντικειμένου

var person = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

console.log(person.fullName()); // Εμφανίζει: "John Doe"

Παράδειγμα 2: Χρήση call() για προσδιορισμό του this

function greet() {
  console.log("Hello, " + this.firstName);
}

var person = {
  firstName: "John"
};

greet.call(person); // Εμφανίζει: "Hello, John"

Παράδειγμα 3: Χρήση apply() για προσδιορισμό του this

function introduce(greeting) {
  console.log(greeting + ", I am " + this.firstName);
}

var person = {
  firstName: "Alice"
};

introduce.apply(person, ["Hi"]); // Εμφανίζει: "Hi, I am Alice"

Παράδειγμα 4: Χρήση bind() για προσδιορισμό του this

function logFullName() {
  console.log("Full name: " + this.fullName());
}

var person = {
  firstName: "Emily",
  lastName: "Smith",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

var logName = logFullName.bind(person);
logName(); // Εμφανίζει: "Full name: Emily Smith"

Σε αυτά τα παραδείγματα, η χρήση του this αναφέρεται στο αντικείμενο person, ανάλογα με τον τρόπο που χρησιμοποιείται η μέθοδος call(), apply() ή bind(), ή μέσα σε μια μέθοδο αντικειμένου.

Επιπλέον, οι μέθοδοι call() και apply() είναι προκαθορισμένες μέθοδοι στη JavaScript.

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

[adinserter block=”4″]

Ένα παράδειγμα κώδικα που δείχνει πώς να χρησιμοποιήσετε τις μεθόδους call() και apply() για την επαναπροσδιορισμό του this όταν καλείτε μια μέθοδο αντικειμένου:

var person1 = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

var person2 = {
  firstName: "Jane",
  lastName: "Smith"
};

// Χρήση της μεθόδου call() για να καλέσουμε την μέθοδο fullName του person1 με το this να αναφέρεται στο person2
var result1 = person1.fullName.call(person2);
console.log(result1); // Εμφανίζει: "Jane Smith"

// Χρήση της μεθόδου apply() με παράμετρο έναν πίνακα ορισμάτων
var result2 = person1.fullName.apply(person2);
console.log(result2); // Εμφανίζει: "Jane Smith"

Στο παραπάνω παράδειγμα, έχουμε δύο αντικείμενα person1 και person2. Το person1 έχει μια μέθοδο fullName, ενώ το person2 δεν έχει αυτή τη μέθοδο. Χρησιμοποιώντας τις μεθόδους call() και apply(), καλούμε τη μέθοδο fullName του person1, αλλά το this αναφέρεται στο αντικείμενο person2, επιτρέποντας έτσι την επαναπροσδιορισμό του this.

Με τη μέθοδο bind(), ένα αντικείμενο μπορεί να “δανειστεί” μια μέθοδο από ένα άλλο αντικείμενο.

Το παρακάτω παράδειγμα δημιουργεί δύο αντικείμενα (person και member), και χρησιμοποιεί τη μέθοδο bind() για να δανειστεί τη μέθοδο getFullName του αντικειμένου person στο αντικείμενο member:

var person = {
  firstName: "John",
  lastName: "Doe",
  getFullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

var member = {
  firstName: "Jane",
  lastName: "Smith"
};

// Χρήση της μεθόδου bind() για να δανειστείτε την getFullName από το αντικείμενο person στο αντικείμενο member
var borrowedMethod = person.getFullName.bind(member);

console.log(borrowedMethod()); // Εμφανίζει: "Jane Smith"

Σε αυτό το παράδειγμα, έχουμε δύο αντικείμενα: person και member. Το person έχει μια μέθοδο getFullName που επιστρέφει το πλήρες όνομα του ατόμου. Χρησιμοποιώντας τη μέθοδο bind(), δανειζόμαστε αυτή τη μέθοδο από το person και την προσαρτούμε στο member. Αυτό σημαίνει ότι τώρα το borrowedMethod είναι μια ανεξάρτητη συνάρτηση που αντιστοιχεί στη getFullName του person, αλλά με το this να αναφέρεται στο member.

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

1. Function Invocation (Regular Function Call): Όταν καλείτε μια συνάρτηση χωρίς κανένα αντικείμενο, το this αναφέρεται στο παγκόσμιο αντικείμενο (browser: window, Node.js: global).
2. Method Invocation: Όταν μια μέθοδος καλείται από ένα αντικείμενο, το this αναφέρεται στο ίδιο το αντικείμενο.
3. Explicit Binding: Χρησιμοποιώντας τις μεθόδους call(), apply() ή bind(), μπορείτε να επιτρέψετε στο this να αναφέρεται σε ένα συγκεκριμένο αντικείμενο.
4. Constructor Function: Όταν χρησιμοποιείτε μια συνάρτηση κατασκευαστή (constructor function) με τον τελεστή new, το this αναφέρεται στο αντικείμενο που δημιουργείται.
5. Arrow Functions: Οι βρόχοι βρόχοι (arrow functions) έχουν διαφορετικό τρόπο συμπεριφοράς για το this, όπου το this δεν αλλάζει σε διαφορετικά περιβάλλοντα.

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