Κατανόηση της λέξης-κλειδί 'this' στο JavaScript

'αυτό' στο JavaScript

Στο JavaScript είναι πιο περίπλοκο, διότι όπου αυτό το αναφέρεται εξαρτάται όχι μόνο από τον τρόπο ορισμού της συνάρτησης αλλά και από τη μορφή κλήσης της.

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

Παγκόσμιο πλαίσιο

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

this; // παράθυρο

Μέσα στη μέθοδο αντικειμένου

Χρησιμοποιείται μέσα σε μια μέθοδο αντικειμένου που συνδέεται με το πλησιέστερο περιβάλλων αντικείμενο. Το αντικείμενο είναι το νέο πλαίσιο της αυτό το λέξη-κλειδί. Σημειώστε ότι δεν πρέπει να αλλάξετε function () στη σύνταξη ES6 fun: () => this.context επειδή θα αλλάξει το πλαίσιο.

const obj = {
  context: "object",
  fun: function() {
    return this.context,
  }
};

obj.fun(); // object

Σε αυτό το παράδειγμα με ένα φωλιασμένο αντικείμενο, αυτό το εξακολουθεί να παραπέμπει στο στενότερο περιβάλλον του.

const nestedObj = {
  context: "parent",
  child: {
    context: "child",
    fun: function() {
      return this.context,
    }
  }
};

nestedObj.child.fun(); // child

Λειτουργία χωρίς πλαίσιο

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

Σημειώστε ότι χρησιμοποιούμε var context αντί για let/const context επειδή let και const να αλλάξετε τη μεταβλητή που περικλείεται στο πλαίσιο. var είναι πάντα πιο κοντά στο παγκόσμιο πλαίσιο εκτέλεσης. let και const δηλώνετε μεταβλητές μόνο σε μια τοπική εμβέλεια μπλοκ.

var context = "global",

const obj = {
  context: "object",
  funA: function() {
    function funB() {
      const context = "function",
      return this.context,
    }
    return funB(); // κλήση χωρίς πλαίσιο
  }
};

obj.funA(); // global

Μέσα στη συνάρτηση του κατασκευαστή

Χρησιμοποιείται μέσα σε μια συνάρτηση που είναι ο κατασκευαστής του νέου αντικειμένου που συνδέεται με αυτήν.

var context = "global",

function Obj() {
  this.context = "Obj context",
}

const obj = new Obj(),
obj.context; // Obj context

Εντός συνάρτησης που ορίζεται στην αλυσίδα πρωτοτύπων

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

const ProtoObj = {
  fun: function() {
    return this.name,
  }
};

const obj = Object.create(ProtoObj),
obj.name = "foo",
obj.fun(); // foo

Μέσα στο call() και τις συναρτήσεις apply()

call() και apply() είναι JavaScript λειτουργίες. Με αυτές, ένα αντικείμενο μπορεί να χρησιμοποιήσει μεθόδους που ανήκουν σε ένα άλλο αντικείμενο. call() δέχεται ορίσματα ξεχωριστά όπου apply() τα λαμβάνει ως πίνακα.

αυτό το συνδέεται εδώ με το νέο πλαίσιο που αλλάζει στο call() και apply() μέθοδοι.

const objA = {
  context: "objA",
  fun: function() {
    console.log(this.context, arguments),
  }
};

const objB = {
  context: "objB"
};

objA.fun(1, 2); // objA, [1, 2]
objA.fun.call(objB, 1, 2, 3); // objB, [1, 2, 3]
objA.fun.apply(objB, [1, 2, 3, 4]); // objB, [1, 2, 3, 4]

Μέσα στη συνάρτηση bind()

bind() είναι επίσης μια μέθοδος JavaScript. Δημιουργεί μια νέα συνάρτηση που θα έχει αυτό το που ορίζεται στην πρώτη παράμετρο που περνάει στην bind()**.**

const objA = {
  context: "objA",
  fun: function() {
    console.log(this.context, arguments),
  }
};

const objB = {
  context: "objB"
};

const fun = objA.fun.bind(objB, 1, 2),
fun(3, 4); // objB, [1, 2, 3, 4]

Μέσα σε χειριστές συμβάντων

Χρησιμοποιείται σε οποιονδήποτε χειριστή συμβάντος (για παράδειγμα, addeventListener, onclick, attachEvent), συνδέεται με το στοιχείο DOM στο οποίο συνδέθηκε το συμβάν.

document.querySelector(".foo").addEventListener("click", function() {
  this; // αναφέρεται στο στοιχείο div `foo`
});

ES6 συνάρτηση βέλους

Χρησιμοποιείται εντός της συνάρτησης βέλους και δεσμεύεται πάντα στη λεξική της εμβέλεια. Μέσα στη συνάρτηση βέλους, δεν μπορείτε να αναθέσετε εκ νέου το αυτό το με οποιονδήποτε τρόπο.

const globalArrowFunction = () => this,

globalArrowFunction(); // Window

const obj = {
  context: "object",
  funA: () => this,
  funB: function() {
    return () => {
      return this.context,
    };
  }
};

obj.funA(); // Window
obj.funB()(); // object

Διαβάστε περισσότερα:

• Οι μεγαλύτερες προκλήσεις με την ανάπτυξη προσαρμοσμένου λογισμικού
• Ποιες είναι οι διαφορές μεταξύ ενός οίκου λογισμικού και ενός γραφείου στελέχωσης προσωπικού πληροφορικής;