Hva er dette nøkkelordet i JavaScript?

Hvis du har programmert i Java, C ++ eller noe annet språk, må du være kjent med "dette" nøkkelordet. I JavaScript fungerer det imidlertid litt annerledes. Det er annerledes fordi JavaScript tilbyr en streng modus. Streng modus er der vi ikke kan bruke ikke -erklærte variabler. Streng modus hjelper også med feilsøking.

Nøkkelordet “dette” er mye brukt på nesten alle programmeringsspråk. Imidlertid er det også det mest forvirrende konseptet. Hvis du er nybegynner, ikke bekymre deg, i dag vil vi dekke nesten alt om "dette" nøkkelordet i JavaScript sammen med eksempler. Så sitte tett, og la turen begynne.

Hva er "dette" nøkkelordet

Den enkleste definisjonen av "dette" nøkkelordet er at det peker på eller refererer til et objekt som det tilhører. Vi kan også si at det refererer til det objektet som kaller funksjonen/metoden for øyeblikket.

Nå som vi vet hva "dette" nøkkelordet betyr, la oss oppdage hvor det brukes. Verdien av "dette" nøkkelordet er også forskjellig basert på hvor det brukes.

Bruker "dette" nøkkelord alene

Nøkkelordet “dette” kan brukes alene uten noen metode. Imidlertid holder den henvisningen til det globale objektet. For eksempel:

const xyz = dette;
Varsel (XYZ);

I dette eksemplet initialiserte vi en variabel, som lagrer referansen til det globale objektet. Det må huskes at nettleservinduet Global Object er [Objektvindu]. Når vi kjører følgende kode, får vi følgende varsel:

Vi kan også bruke "dette" nøkkelordet alene ved hjelp av streng modus. Løsningen vil være den samme i-e den vil vise [objektvinduet] varselet. Koden vil se slik ut:

const xyz = dette;
Varsel (XYZ);

Bruker "dette" nøkkelordet i funksjon

Å bruke "dette" nøkkelordet i en funksjon er standard måte. “Dette” nøkkelordet vil også referere til det globale objektet i en funksjon. For eksempel:

funksjon myfunc ()
Varsel (dette);

myFunc ();

Imidlertid, hvis vi bruker dette nøkkelordet i streng modus, er resultatet udefinert. Det er fordi JavaScript i streng modus begrenser standardbinding. For eksempel:

bruk streng ";
funksjon myfunc ()
Varsel (dette);

myFunc ();

I dette eksemplet brukte vi “Bruk streng”. Vi blir returnert udefinert når vi kjører denne koden.

Bruker "dette" nøkkelordet i hendelsesbehandlere

Arrangementshåndterere håndterer arrangementer. For eksempel, hvis du klikker på en knapp, blir det klikket håndtert av hendelsesbehandlere. Hvis vi vil referere til det knappelementet i HTML som vi mottok klikket, bruker vi "dette" nøkkelordet.
Anta for eksempel at vi har en knapp. Vi vil få det til å forsvinne når vi klikker på den. Vi vil oppnå det med følgende kode:

Html:

Klikk meg for å se magi

JavaScript:

const btn = dokument.QuerySelector (".Vanish-BTN ");
btn.AddEventListener ('klikk', funksjon ()
dette.stil.display = "ingen";
)

I denne koden opprettet vi i HTML først en knapp med klassenavnet "Vanish-BTN". Etter det satte vi skriptetoden der vi refererte til filnavnet til JavaScript. I JavaScript -filen får vi først referansen til knappen "BTN" ved hjelp av klassenavnet. Etter det setter vi en hendelseslytter med et klikk på en knapp. I dette når knappen skal klikkes, kjøres tilbakeringingsfunksjonen der vi har gjort visningen av knappen ingen.

Før du klikker på knappen, vil nettleseren se slik ut:

Når vi klikker på Klikk meg for å se magi knapp den forsvinner.

Objektmetodebinding

Vi vil gi noen eksempler først, og så vil vi diskutere det for å forstå konseptet. Husk imidlertid at nøkkelordet “dette” er spillerobjektet definert i følgende eksempel eller overordnede objekt som det refererer til.

const spiller =
Navn: "Hazard",
Klubb: "Chelsea",
Shirtno: 10,
myfunc: funksjon ()
Returner dette.Navn;

;
Varsel (spiller.myfunc () + "spiller for" + spiller.klubb);

I dette eksemplet initierte vi et objekt med navnet “Player”. Vi spesifiserte egenskapene som navn, klubb og skjorte nummer. Etter det laget vi en funksjon. Til slutt varsler vi spillerobjektfunksjonen og klubben han spiller for. Dette brukes i myfunc () funksjon. I dette refererer det til spillernavnet med nøkkelordene “Dette. Navn". Resultatet innenfor et varsel vil se slik ut:

Nøkkelord “dette” i en pilfunksjon

Arrow -funksjoner ble først introdusert i ES6 -versjonen og har en lignende funksjon som en standard JavaScript -funksjon, bortsett fra at pilfunksjonene forkorter syntaks.
For eksempel:

funksjon myfunc ()
Returner "Champions of Europe"

myFunc ();

Dette kan skrives som:

const myfunc = () =>
Returner "Champions of Europe";

Nøkkelord “dette” håndteres annerledes i en pilfunksjon enn i standardfunksjonen. For å være presis, har pilfunksjoner ingen binding av "dette" nøkkelordet. Også "dette" nøkkelordet refererer til variabelen eller objektet som definerte pilfunksjonen.
For eksempel:

const player = () => (
Navn: "Hazard",
Klubb: "Chelsea",
Shirtno: 10,
myfunc: funksjon ()
Returner dette.Navn;

);
Varsel (spiller ().myfunc ());

Nøkkelord “dette” refererte her spilleren som spillerdefinerte pilfunksjonen.

Konklusjon

I denne artikkelen diskuterte vi hva "dette" nøkkelordet er og hvordan det brukes. Vi diskuterte også hvor og hvordan vi kan bruke "dette" nøkkelordet. Alt dette ved hjelp av eksempler. “Dette” nøkkelordet er et viktig konsept av JavaScript og hovedsakelig nybegynnere sliter med dette. Vi håper at dette innlegget har avklart eventuelle uklarheter du måtte ha hatt.