Et af de mest udfordrende og hyppigt brugte begreber i JavaScript er ' dette ” nøgleord. JavaScript bruger ' dette ” søgeord anderledes end andre sprog. Det er dog vigtigt for at skabe mere avanceret JavaScript-kode. Som nybegynder kan det på en eller anden måde være svært for dig at forstå brugen af det nævnte søgeord, men ingen bekymringer!
Dette indlæg vil forklare ' dette ” søgeord og dets brug i JavaScript.
Hvad er 'dette' i JavaScript?
“ dette ” er nøgleordet i JavaScript, der refererer til et objekt, der udfører den eksisterende kodeblok. Det repræsenterer et objekt, der påkalder den aktuelle funktion. Det bruges i flere scenarier på forskellige måder, såsom:
-
- I metode
- I eventhåndtering
- I funktioner
Lad os tjekke hver af de nævnte anvendelser en efter en!
Hvordan bruger man 'dette' i JavaScript-metoder?
“ dette ” bruges i JavaScript-metoder som en implicit binding. Når funktionen kaldes ved hjælp af et objekt og en prik, betragtes den som implicit binding, og ' dette ” påpeger objektet under funktionskaldet.
Eksempel
Først vil vi oprette et objekt med nogle egenskaber og en metode og derefter bruge ' dette ” nøgleord for at få værdierne af objektets egenskaber:
var personInfo = {
navn: 'John' ,
alder: tyve ,
info: fungere ( ) {
console.log ( 'Hy! Jeg er' + dette.navn + ' og jeg er ' + denne.alder + ' år gammel' ) ;
}
}
Ring derefter til ' info() ” metode sammen med objektnavn:
Det kan ses, at de angivne egenskabsværdier for det aktuelle objekt vises med succes:
Hvis du vil bruge ' dette ” i begivenhedshåndtering, følg nedenstående afsnit.
Hvordan bruger man 'dette' i JavaScript-hændelseshåndtering?
I dette eksempel kan du tjekke brugen af ' dette ” nøgleord i eventhåndtering. Til dette kan du overveje et eksempel, hvor vi skjuler vores knap med et enkelt klik. For at gøre det skal du oprette en knap og vedhæfte en ' onclick() ' begivenhed med det for at få adgang til style.display-egenskaben med ' dette ” søgeord, der skjuler knappen, når der klikkes på:
< h3 > Klik for at skjule knappen h3 >< knap onclick = 'this.style.display='ingen'' > Klik her ! knap >
Produktion
Hvis du er forvirret over brugen af ' dette ” nøgleord i brugerdefinerede funktioner i JavaScript, følg det givne afsnit.
Hvordan bruger man 'dette' i JavaScript-funktioner?
Mens du bruger ' dette ” i funktioner er der tre typer bindinger i JavaScript, herunder:
-
- Standard binding
- Implicit binding
- Eksplicit binding
Lad os forstå dem individuelt!
Eksempel 1: Brug af dette nøgleord i standardbinding
I standardbinding er ' dette ” nøgleord fungerer som et globalt objekt. Det bruges mest i selvstændige funktioner.
Lad os forstå det angivne koncept med et eksempel.
Først vil vi oprette en variabel ' x ' og tildel den værdien ' femten ”:
var x = femten ;
Definer derefter en funktion med navnet ' funktionDB() ' og dens funktionsdefinition, opret en variabel med samme navn ' x ' og tildel den en værdi ' 5 ', udskriv derefter dens værdi ved hjælp af ' console.log() ' metode med ' dette ' søgeord:
var x = 5 ;
console.log ( dette.x ) ;
}
Ring endelig til ' funktionDB() ' funktion:
På grund af brugen af ' dette ' nøgleord, viser output værdien af ' x ' som ' femten ” fordi det fungerer som et globalt objekt, og processen kaldes ” Dynamisk binding ”:
Eksempel 2: Brug af dette søgeord i implicit binding
Når funktionen kaldes af et objekt eller et priksymbol, ' dette ” søgeord fungerer som en implicit binding. Den peger på objektet under funktionskaldet.
I dette eksempel vil vi definere en funktion ' info() ' og brug ' dette ” nøgleord i funktionsdefinitionen:
fungere info ( ) {console.log ( 'Hy! Jeg er' + dette.navn + ' og jeg er ' + denne.alder + ' år gammel' )
}
Opret derefter et objekt med navnet ' personInfo ” med definerede egenskaber:
navn: 'John' ,
alder: tyve ,
info: info
}
Kald nu funktionen langs objektet:
Produktion
Eksempel 3: Brug af dette søgeord i eksplicit binding
Eksplicit binding kaldes også ' hård binding ” fordi funktionen kaldes kraftigt for at bruge et bestemt objekt til ” dette ” binding, uden at sætte en egenskabsfunktionsreference på objektet. Til dette formål kan metoderne call(), application() og bind() bruges.
Vi vil nu bruge den samme funktion kaldet ' info() ” defineret i det foregående eksempel. Opret derefter et objekt med navnet ' personInfo ' med følgende værdier:
var personInfo = {navn: 'John' ,
alder: tyve
}
For at aktivere funktionen med navnet ' info() ', vil vi bruge ' opkald() ”-metoden og send det oprettede objekt det til som et argument:
Da info() ikke er en del af objektet, har vi stadig eksplicit adgang til det:
For eksplicit at kalde en funktion kan du også bruge metoderne apply() og bind(). Apply()-metoden er identisk med call()-metoden, mens bind()-metoden opretter en ny funktion med samme krop og omfang, der opfører sig på samme måde som den oprindelige funktion. Metoden bind() kan bruges til at returnere en funktion, som du kan bruge senere.
For at kalde info() med application()-metoden skal du bruge følgende sætning:
info.anvend ( personInfo ) ;
Det giver det samme output som call() metoden giver:
For at ringe til ' info() ' med ' binde() ”-metoden, brug den givne sætning:
Produktion
Vi har samlet alle de væsentlige oplysninger relateret til ' dette ” nøgleord.
Konklusion
“ dette ” er nøgleordet i JavaScript, der refererer til et objekt, der udfører den eksisterende kodeblok. Det repræsenterer det objekt, der påkalder den aktuelle funktion. Det bruges i flere scenarier på forskellige måder, herunder metoder, hændelseshåndtering og funktioner. I dette indlæg har vi forklaret ' dette ” nøgleord i JavaScript.