I denne vejledning lærer du om JavaScript's dette nøgleord ved hjælp af eksempler.
I JavaScript thishenviser nøgleord til objektet, hvor det kaldes.
1. dette Inside Global Scope
Når thisdet bruges alene, thishenviser det til det globale objekt ( windowobjekt i browsere). For eksempel,
let a = this; console.log(a); // Window () this.name = 'Sarah'; console.log(window.name); // Sarah
Her this.nameer det samme som window.name.
2. denne indvendige funktion
Når thisbruges i en funktion, thisrefererer til det globale objekt ( windowobjekt i browsere). For eksempel,
function greet() ( // this inside function // this refers to the global object console.log(this); ) greet(); // Window ()
3. denne Inside Constructor-funktion
I JavaScript bruges konstruktorfunktioner til at oprette objekter. Når en funktion bruges som en konstruktionsfunktion, thishenviser det til det objekt, hvori det bruges. For eksempel,
function Person() ( this.name = 'Jack'; console.log(this); ) let person1 = new Person(); console.log(person1.name);
Produktion
Person (navn: "Jack") Jack
Her thishenviser til person1-objektet. Det er derfor, person1.namegiver os Jack.
Bemærk : Når thisdet bruges med ES6-klasser, henviser det til det objekt, inden for hvilket det bruges (svarende til konstruktorfunktioner).
4. denne Inside Object Method
Når thisdet bruges inden for et objekts metode, thisrefererer det til det objekt, det ligger i. For eksempel,
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();
Produktion
(navn: "Jack", alder: 25, hilse: ƒ) Jack
I ovenstående eksempel thishenviser til personobjektet.
5. denne indvendige indre funktion
Når du åbner thisen indre funktion (inde i en metode), thisrefererer til det globale objekt. For eksempel,
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();
Produktion
(navn: "Jack", alder: 25, hilsen: ƒ) 25 Vindue (…) udefineret
Her refererer thisinde innerFunc()til det globale objekt, fordi det innerFunc()er inde i en metode.
Imidlertid refererer this.ageudvendigt innerFunc()til personobjektet.
6. denne Inside Arrow-funktion
Inde i pilfunktionen thisrefererer til det overordnede omfang. For eksempel,
const greet = () => ( console.log(this); ) greet(); // Window (… )
Pilfunktioner har ikke deres egne this. Når du bruger thisinde i en pilfunktion, thishenviser det til dets overordnede omfangsobjekt. For eksempel,
const greet = ( name: 'Jack', // method sayHi () ( let hi = () => console.log(this.name); hi(); ) ) greet.sayHi(); // Jack
Her refererer funktionen this.nameinde hi()til greetobjektet inde.
Du kan også bruge pilefunktionen til at løse problemet med at have, undefinednår du bruger en funktion i en metode (som det ses i eksempel 5). For eksempel,
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();
Produktion
(navn: "Jack", alder: 25, hilse: ƒ) 25 (navn: "Jack", alder: 25, hilse: ƒ) 25
Her innerFunc()defineres ved hjælp af pilefunktionen. Det tager thisfra dets overordnede omfang. Derfor this.agegiver 25 .
Når pilfunktionen bruges med this, henviser den til det ydre omfang.
7. denne indvendige funktion med streng tilstand
Når thisbruges i en funktion med streng tilstand, thiser undefined. For eksempel,
'use strict'; this.name = 'Jack'; function greet() ( // this refers to undefined console.log(this); ) greet(); // undefined
Bemærk : Når du bruger thisinde i en funktion med streng tilstand, kan du bruge JavaScript-funktionskald ().
For eksempel,
'use strict'; this.name = 'Jack'; function greet() ( console.log(this.name); ) greet.call(this); // Jack
Når du passerer thismed call()funktionen, greet()behandles det som metoden til thisobjektet (globalt objekt i dette tilfælde).
