Σε αυτό το σεμινάριο, θα μάθετε για τη JavaScript αυτή τη λέξη-κλειδί με τη βοήθεια παραδειγμάτων.
Στο JavaScript, η thisλέξη-κλειδί αναφέρεται στο αντικείμενο στο οποίο καλείται.
1. αυτό το Inside Global Scope
Όταν thisχρησιμοποιείται μόνο του, thisαναφέρεται στο καθολικό αντικείμενο ( windowαντικείμενο στα προγράμματα περιήγησης). Για παράδειγμα,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Εδώ, this.nameείναι το ίδιο με window.name.
2. Αυτή η εσωτερική λειτουργία
Όταν thisχρησιμοποιείται σε μια συνάρτηση, thisαναφέρεται στο καθολικό αντικείμενο ( windowαντικείμενο σε προγράμματα περιήγησης). Για παράδειγμα,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. Αυτή η λειτουργία εσωτερικού κατασκευαστή
Στο JavaScript, οι λειτουργίες του κατασκευαστή χρησιμοποιούνται για τη δημιουργία αντικειμένων. Όταν μια συνάρτηση χρησιμοποιείται ως συνάρτηση κατασκευαστή, thisαναφέρεται στο αντικείμενο μέσα στο οποίο χρησιμοποιείται. Για παράδειγμα,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Παραγωγή
Πρόσωπο (όνομα: "Jack") Jack
Εδώ, thisαναφέρεται στο αντικείμενο person1. Γι 'αυτό, person1.nameμας δίνει ο Τζακ.
Σημείωση : Όταν thisχρησιμοποιείται με κλάσεις ES6, αναφέρεται στο αντικείμενο μέσα στο οποίο χρησιμοποιείται (παρόμοιο με τις λειτουργίες του κατασκευαστή).
4. Αυτή η μέθοδος εσωτερικού αντικειμένου
Όταν thisχρησιμοποιείται μέσα στη μέθοδο ενός αντικειμένου, thisαναφέρεται στο αντικείμενο στο οποίο βρίσκεται. Για παράδειγμα,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.name); ) ) person.greet();
Παραγωγή
(όνομα: "Jack", ηλικία: 25, χαιρετίστε: ƒ) Jack
Στο παραπάνω παράδειγμα, thisαναφέρεται στο personαντικείμενο.
5. Αυτή η εσωτερική λειτουργία
Όταν έχετε πρόσβαση thisσε μια εσωτερική λειτουργία (μέσα σε μια μέθοδο), thisαναφέρεται στο καθολικό αντικείμενο. Για παράδειγμα,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); // (name: "Jack", age… ) console.log(this.age); // 25 // inner function function innerFunc() ( // this refers to the global object console.log(this); // Window (… ) console.log(this.age); // undefined ) innerFunc(); ) ) person.greet();
Παραγωγή
(όνομα: "Jack", ηλικία: 25, χαιρετισμός: ƒ) 25 Παράθυρο (…) απροσδιόριστο
Εδώ, το thisεσωτερικό innerFunc()αναφέρεται στο καθολικό αντικείμενο επειδή innerFunc()βρίσκεται μέσα σε μια μέθοδο.
Ωστόσο, το this.ageεξωτερικό innerFunc()αναφέρεται στο personαντικείμενο.
6. Αυτή η λειτουργία εσωτερικού βέλους
Μέσα στη λειτουργία βέλους, thisαναφέρεται στο γονικό πεδίο. Για παράδειγμα,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Οι λειτουργίες βέλους δεν έχουν τις δικές τους this. Όταν χρησιμοποιείτε thisμέσα σε μια λειτουργία βέλους, thisαναφέρεται στο αντικείμενο του γονικού πεδίου. Για παράδειγμα,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Εδώ, this.nameμέσα στη hi()συνάρτηση αναφέρεται στο greetαντικείμενο.
Μπορείτε επίσης να χρησιμοποιήσετε τη λειτουργία βέλους για να επιλύσετε το ζήτημα της ύπαρξης undefinedόταν χρησιμοποιείτε μια συνάρτηση μέσα σε μια μέθοδο (όπως φαίνεται στο παράδειγμα 5) Για παράδειγμα,
const person = ( name : 'Jack', age: 25, // this inside method // this refers to the object itself greet() ( console.log(this); console.log(this.age); // inner function let innerFunc = () => ( // this refers to the global object console.log(this); console.log(this.age); ) innerFunc(); ) ) person.greet();
Παραγωγή
(όνομα: "Jack", ηλικία: 25, χαιρετισμός: ƒ) 25 (όνομα: "Jack", ηλικία: 25, χαιρετισμό: ƒ) 25
Εδώ, innerFunc()ορίζεται χρησιμοποιώντας τη λειτουργία βέλους. Παίρνει thisαπό το πεδίο εφαρμογής του γονέα. Ως εκ τούτου, this.ageδίνει 25 .
Όταν χρησιμοποιείται η λειτουργία βέλους this, αναφέρεται στο εξωτερικό πεδίο.
7. Αυτή η εσωτερική λειτουργία με αυστηρή λειτουργία
Όταν thisχρησιμοποιείται σε μια λειτουργία με αυστηρή λειτουργία, thisείναι undefined. Για παράδειγμα,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Σημείωση : Όταν χρησιμοποιείτε thisμέσα σε μια λειτουργία με αυστηρή λειτουργία, μπορείτε να χρησιμοποιήσετε την κλήση συνάρτησης JavaScript ().
Για παράδειγμα,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Όταν περνάτε thisμε τη call()συνάρτηση, greet()αντιμετωπίζεται ως η μέθοδος του thisαντικειμένου (καθολικό αντικείμενο σε αυτήν την περίπτωση).
