In deze zelfstudie leert u met behulp van voorbeelden over dit trefwoord van JavaScript.
In JavaScript thisverwijst trefwoord naar het object waar het wordt aangeroepen.
1. deze Inside Global Scope
Wanneer thisalleen wordt gebruikt, thisverwijst naar het globale object ( windowobject in browsers). Bijvoorbeeld,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Hier this.nameis hetzelfde als window.name.
2. deze Inside-functie
Wanneer thiswordt gebruikt in een functie, thisverwijst naar het globale object ( windowobject in browsers). Bijvoorbeeld,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. deze Inside Constructor-functie
In JavaScript worden constructorfuncties gebruikt om objecten te maken. Wanneer een functie wordt gebruikt als een constructorfunctie, thisverwijst dit naar het object waarin deze wordt gebruikt. Bijvoorbeeld,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Uitvoer
Persoon (naam: "Jack") Jack
Hier thisverwijst naar de person1 object. Daarom, person1.namegeeft Jack ons.
Opmerking : wanneer thiswordt gebruikt met ES6-klassen, verwijst het naar het object waarin het wordt gebruikt (vergelijkbaar met constructorfuncties).
4. deze Inside Object-methode
Wanneer thiswordt gebruikt in de methode van een object, thisverwijst naar het object waarin het zich bevindt. Bijvoorbeeld,
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();
Uitvoer
(naam: "Jack", leeftijd: 25, begroet: ƒ) Jack
thisVerwijst in het bovenstaande voorbeeld naar het personobject.
5. deze innerlijke innerlijke functie
Wanneer u toegang krijgt tot thiseen innerlijke functie (binnen een methode), thisverwijst dit naar het globale object. Bijvoorbeeld,
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();
Uitvoer
(naam: "Jack", leeftijd: 25, groet: ƒ) 25 Venster (…) niet gedefinieerd
Hier verwijst thisinside innerFunc()naar het globale object omdat het innerFunc()zich in een methode bevindt.
Echter this.agebuiten innerFunc()verwijst naar het personobject.
6. deze Inside Arrow-functie
Binnen de pijlfunctie thisverwijst naar het bovenliggende bereik. Bijvoorbeeld,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Pijlfuncties hebben hun eigen functies this. Wanneer u thisbinnen een pijlfunctie gebruikt, thisverwijst dit naar het bovenliggende scope-object. Bijvoorbeeld,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Hier verwijst this.namede hi()functie naar het greetobject.
U kunt ook de pijlfunctie gebruiken om het probleem op te lossen undefinedwanneer u een functie binnen een methode gebruikt (zoals te zien is in Voorbeeld 5). Bijvoorbeeld,
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();
Uitvoer
(naam: "Jack", leeftijd: 25, begroet: ƒ) 25 (naam: "Jack", leeftijd: 25, begroet: ƒ) 25
Hier innerFunc()wordt gedefinieerd met behulp van de pijlfunctie. Het ontleent thiszijn bovenliggende reikwijdte. Daarom this.agegeeft 25 .
Wanneer de pijlfunctie wordt gebruikt met this, verwijst dit naar de buitenste scope.
7. deze interne functie met strikte modus
Wanneer thiswordt gebruikt in een functie met strikte modus, thisis undefined. Bijvoorbeeld,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Opmerking : als u thisbinnen een functie met strikte modus gebruikt, kunt u JavaScript Function call () gebruiken.
Bijvoorbeeld,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Wanneer u slaagt thisvoor de call()functie, greet()wordt deze behandeld als de methode van het thisobject (in dit geval globaal object).
