JavaScript dette | Forklart

Et av de mest utfordrende og ofte brukte konseptene i JavaScript er "dette”Nøkkelord. JavaScript bruker "dette”Nøkkelord annerledes enn andre språk. Imidlertid er det 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 nøkkelordet, men ingen bekymringer!

Dette innlegget vil forklare “dette”Søkeord og bruken av det i JavaScript.

Hva er "dette" i JavaScript?

“dette”Er nøkkelordet i JavaScript som refererer til et objekt som utfører den eksisterende kodeblokken. Det representerer et objekt som påkaller den nåværende funksjonen. Det 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 bruker 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 det som implisitt binding, og "dette”Peker ut objektet under funksjonssamtalen.

Eksempel

Først vil vi lage et objekt med noen egenskaper og en metode og deretter bruke "dette”Søkeord for å få verdiene på objektets egenskaper:

var personInfo =
Navn: "John",
Alder: 20,
info: funksjon ()
konsoll.Logg ("Hy! Jeg er " + dette.Navn + "Og jeg er" + dette.alder + "år gammel");

Neste, ring “info ()”Metode sammen med objektnavn:

PersonInfo.info ();

Det kan sees at de spesifiserte egenskapsverdiene til det gjeldende objektet vises vellykket:

Hvis du vil bruke “dette”Følg avsnittet Håndtering i delen 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 vår med et enkelt klikk. For å gjøre det, lag en knapp og fest en “ved trykk()”Arrangement med det for å få tilgang til stilen.vise eiendom med "dette”Søkeord som vil skjule knappen når du klikker:

Klikk for å skjule knappen

Klikk her!

Produksjon

Hvis du er forvirret over bruken av "dette”Søkeord 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:

• • Standardbinding
  • Implisitt binding
  • Eksplisitt binding

La oss forstå dem individuelt!

Eksempel 1: Bruk av dette nøkkelordet i standardbinding

Som standard binding, "dette”Søkeord 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”15”:

var x = 15;

Deretter definerer du en funksjon som heter “funksjonDB ()”Og dens funksjonsdefinisjon, lag en variabel med samme navn”x”Og tilordne det en verdi”5”Skriv deretter ut verdien ved å bruke“konsoll.Logg()”Metode med“dette”Nøkkelord:

var funksjondb = funksjon ()
var x = 5;
konsoll.Logg (dette.x);

Til slutt, ring "funksjonDB ()”Funksjon:

funksjonDB ();

På grunn av bruken av “dette”Søkeord, utdata viser verdien av“x" som "15”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 av et objekt eller et prikksymbol, “dette”Søkeord fungerer som en implisitt binding. Det påpeker objektet under funksjonssamtalen.

I dette eksemplet vil vi definere en funksjon "info ()”Og bruk“dette”Nøkkelord i funksjonsdefinisjonen:

Funksjonsinfo ()
konsoll.Logg ("Hy! Jeg er " + dette.Navn + "Og jeg er" + dette.alder + "år gammel")

Opprett deretter et objekt som heter “PersonInfo”Med definerte egenskaper:

var personInfo =
Navn: "John",
Alder: 20,
Info: Info

Nå, ring funksjonen langs objektet:

PersonInfo.info ();

Produksjon

Eksempel 3: Bruk av dette nøkkelordet i eksplisitt binding

Eksplisitt binding kalles også "hardt binding”Fordi funksjonen er kraftig kalt for å bruke et bestemt objekt for“dette”Binding, uten å sette en eiendomsfunksjonsreferanse på objektet. For dette formålet kan ring (), anvende () og binde () metoder brukes.

Vi vil nå bruke den samme funksjonen som heter “info ()”Definert i forrige eksempel. Opprett deretter et objekt som heter “PersonInfo”Med følgende verdier:

var personInfo =
Navn: "John",
Alder: 20

For å påkalle funksjonen som heter “info ()”, Vi vil bruke“anrop()”Metode og gi det opprettede objektet det til som et argument:

info.ring (personinfo);

Siden info () ikke er en del av objektet, har vi fremdeles eksplisitt tilgang til den:

For å ringe en funksjon eksplisitt, kan du også bruke Apply () og Bind () -metodene. Apply () -metoden er identisk med Call () -metoden, mens bind () -metoden skaper 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 å ringe info () med Apply () -metoden, bruk følgende uttalelse:

info.søk (personinfo);

Den gir samme utgang som Call () -metoden gir:

For å ringe “info ()" med "binde()”Metode, bruk den gitte uttalelsen:

info.bind (personinfo);

Produksjon

Vi har samlet all den essensielle informasjonen relatert til “dette”Nøkkelord.

Konklusjon

“dette”Er nøkkelordet i JavaScript som refererer til et objekt som utfører den eksisterende kodeblokken. Det representerer objektet som påkaller den nåværende funksjonen. Det 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.