Et av de mest utfordrende og ofte brukte konseptene i JavaScript er ' dette ' nøkkelord. JavaScript bruker ' dette ' søkeord annerledes enn andre språk. Det er imidlertid viktig for å lage mer avansert JavaScript-kode. Som nybegynner kan det på en eller annen måte være vanskelig for deg å forstå bruken av det nevnte søkeordet, men ingen grunn til bekymring!
Dette innlegget vil forklare ' dette ' nøkkelord og dets bruk i JavaScript.
Hva er 'dette' i JavaScript?
' dette ” er nøkkelordet i JavaScript som refererer til et objekt som kjører den eksisterende kodeblokken. Den representerer et objekt som påkaller gjeldende funksjon. Den brukes i flere scenarier på forskjellige måter, for eksempel:
-
- I metode
- I hendelseshåndtering
- I funksjoner
La oss sjekke ut hver av de nevnte bruksområdene en etter en!
Hvordan bruke 'dette' i JavaScript-metoder?
' dette ” brukes i JavaScript-metoder som en implisitt binding. Når funksjonen kalles ved hjelp av et objekt og en prikk, anses den som implisitt binding, og ' dette ” peker ut objektet under funksjonsanropet.
Eksempel
Først vil vi lage et objekt med noen egenskaper og en metode og deretter bruke ' dette ' nøkkelord for å få verdiene til objektets egenskaper:
var personInfo = {
Navn: 'John' ,
alder: tjue ,
info: funksjon ( ) {
console.log ( 'Hei! Jeg er' + dette.navn + ' og jeg er ' + this.age + ' år gammel' ) ;
}
}
Deretter ringer du ' info() ' metode sammen med objektnavn:
Det kan sees at de spesifiserte egenskapsverdiene til gjeldende objekt vises:
Hvis du vil bruke ' dette ” i hendelseshåndtering, følg avsnittet nedenfor.
Hvordan bruke 'dette' i JavaScript-hendelseshåndtering?
I dette eksemplet, sjekk ut bruken av ' dette ” nøkkelord i hendelseshåndtering. For dette, vurder et eksempel der vi vil skjule knappen med et enkelt klikk. For å gjøre det, lag en knapp og legg ved en ' ved trykk() '-hendelse med den for å få tilgang til style.display-egenskapen med ' dette ' nøkkelord som skjuler knappen når den klikkes:
< h3 > Klikk for å skjule knappen h3 >< knapp ved trykk = 'this.style.display='ingen'' > Klikk her ! knapp >
Produksjon
Hvis du er forvirret om bruken av ' dette ” nøkkelord i brukerdefinerte funksjoner i JavaScript, følg den gitte delen.
Hvordan bruke 'dette' i JavaScript-funksjoner?
Mens du bruker ' dette ” i funksjoner er det tre typer bindinger i JavaScript, inkludert:
-
- Standard binding
- Implisitt binding
- Eksplisitt binding
La oss forstå dem individuelt!
Eksempel 1: Bruk av dette nøkkelordet i standardbinding
I standardbinding er ' dette ” nøkkelord fungerer som et globalt objekt. Det brukes mest i frittstående funksjoner.
La oss forstå det uttalte konseptet med et eksempel.
Først vil vi lage en variabel ' x ' og tilordne den verdien ' femten ':
var x = femten ;
Definer deretter en funksjon kalt ' funksjonDB() ' og funksjonsdefinisjonen, lag en variabel med samme navn ' x ' og tilordne den en verdi ' 5 ', skriv deretter ut verdien ved å bruke ' console.log() ' metode med ' dette ' nøkkelord:
var x = 5 ;
console.log ( dette.x ) ;
}
Til slutt, ring ' funksjonDB() ' funksjon:
På grunn av bruken av ' dette ' nøkkelord, viser utdata verdien av ' x ' som ' femten ' fordi det fungerer som et globalt objekt og prosessen kalles ' Dynamisk binding ':
Eksempel 2: Bruk av dette nøkkelordet i implisitt binding
Når funksjonen kalles opp av et objekt eller et prikksymbol, ' dette ” nøkkelord fungerer som en implisitt binding. Den peker ut objektet under funksjonsanropet.
I dette eksemplet vil vi definere en funksjon ' info() ' og bruk ' dette ' nøkkelord i funksjonsdefinisjonen:
funksjon info ( ) {console.log ( 'Hei! Jeg er' + dette.navn + ' og jeg er ' + this.age + ' år gammel' )
}
Deretter oppretter du et objekt som heter ' personInfo ' med definerte egenskaper:
Navn: 'John' ,
alder: tjue ,
info: info
}
Kall nå funksjonen langs objektet:
Produksjon
Eksempel 3: Bruk av dette nøkkelordet i eksplisitt binding
Eksplisitt binding kalles også ' hard binding ' fordi funksjonen kalles kraftig for å bruke et bestemt objekt for ' dette ” binding, uten å sette en egenskapsfunksjonsreferanse på objektet. Til dette formålet kan call(), application() og bind()-metodene brukes.
Vi vil nå bruke samme funksjon kalt ' info() ” definert i forrige eksempel. Deretter oppretter du et objekt som heter ' personInfo ' med følgende verdier:
var personInfo = {Navn: 'John' ,
alder: tjue
}
For å påkalle funksjonen kalt ' info() ', vil vi bruke ' anrop() ”-metoden og send det opprettede objektet det til som et argument:
Siden info() ikke er en del av objektet, har vi fortsatt eksplisitt tilgang til det:
For å kalle en funksjon eksplisitt kan du også bruke metodene apply() og bind(). Apply()-metoden er identisk med call()-metoden, mens bind()-metoden lager en ny funksjon med samme kropp og omfang som oppfører seg på samme måte som den opprinnelige funksjonen. Bind()-metoden kan brukes til å returnere en funksjon som du kan bruke senere.
For å kalle info() med application()-metoden, bruk følgende setning:
info.søke ( personInfo ) ;
Det gir samme utdata som call()-metoden gir:
For å ringe ' info() ' med ' binde() '-metoden, bruk den gitte setningen:
Produksjon
Vi har samlet all viktig informasjon knyttet til ' dette ' nøkkelord.
Konklusjon
' dette ” er nøkkelordet i JavaScript som refererer til et objekt som kjører den eksisterende kodeblokken. Den representerer objektet som påkaller gjeldende funksjon. Den brukes i flere scenarier på forskjellige måter, inkludert metoder, hendelseshåndtering og funksjoner. I dette innlegget har vi forklart ' dette ' nøkkelord i JavaScript.