În acest tutorial, veți afla despre acest cuvânt cheie JavaScript cu ajutorul exemplelor.
În JavaScript, thiscuvântul cheie se referă la obiectul unde este numit.
1. acest Scop Global Interior
Când thiseste utilizat singur, thisse referă la obiectul global ( windowobiectul din browsere). De exemplu,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Aici, this.nameeste la fel ca window.name.
2. această funcție Inside
Când thiseste utilizat într-o funcție, thisse referă la obiectul global ( windowobiect din browsere). De exemplu,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. această funcție Inside Constructor
În JavaScript, funcțiile constructor sunt utilizate pentru a crea obiecte. Când o funcție este utilizată ca funcție constructor, thisse referă la obiectul în interiorul căruia este utilizată. De exemplu,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Ieșire
Persoană (nume: „Jack”) Jack
Aici, thisse referă la obiectul person1. De aceea, person1.namene dă Jack.
Notă : Când thiseste utilizat cu clasele ES6, se referă la obiectul în interiorul căruia este utilizat (similar cu funcțiile constructorului).
4. această metodă Inside Object
Când thiseste folosit în metoda unui obiect, thisse referă la obiectul în care se află. De exemplu,
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();
Ieșire
(nume: „Jack”, vârstă: 25 de ani, salut: ƒ) Jack
În exemplul de mai sus, thisse referă la personobiect.
5. această funcție interioară interioară
Când accesați thisîn interiorul unei funcții interioare (în interiorul unei metode), thisse referă la obiectul global. De exemplu,
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();
Ieșire
(nume: „Jack”, vârstă: 25, salut: ƒ) 25 Fereastra (…) nedefinită
Aici, thisîn interior innerFunc()se referă la obiectul global, deoarece innerFunc()se află în interiorul unei metode.
Cu toate acestea, this.ageexteriorul innerFunc()se referă la personobiect.
6. această funcție Săgeată interioară
În interiorul funcției săgeată, thisse referă la domeniul de aplicare părinte. De exemplu,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Funcțiile săgeată nu au propriile lor funcții this. Când utilizați thisîn interiorul unei funcții săgeată, thisse referă la obiectul său de scop părinte. De exemplu,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Aici, this.nameîn interior, hi()funcția se referă la greetobiect.
De asemenea, puteți utiliza funcția săgeată pentru a rezolva problema de a avea undefinedatunci când utilizați o funcție în interiorul unei metode (așa cum se vede în Exemplul 5). De exemplu,
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();
Ieșire
(nume: „Jack”, vârstă: 25, salut: ƒ) 25 (nume: „Jack”, vârstă: 25, salut: ƒ) 25
Aici, innerFunc()este definit folosind funcția săgeată. Ea ia thisdin domeniul său de aplicare părinte. Prin urmare, this.agedă 25 .
Când funcția săgeată este utilizată cu this, se referă la scopul exterior.
7. această funcție interioară cu modul strict
Când thiseste utilizat într-o funcție cu mod strict, thiseste undefined. De exemplu,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Notă : Când utilizați thiso funcție în modul strict, puteți utiliza apelul funcției JavaScript ().
De exemplu,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Când treceți thiscu call()funcția, greet()este tratat ca metoda thisobiectului (obiect global în acest caz).
