Een van de meest uitdagende en vaak gebruikte concepten in JavaScript is de “ deze ” trefwoord. JavaScript gebruikt de ' deze ” trefwoord anders dan in andere talen. Het is echter essentieel voor het maken van meer geavanceerde JavaScript-code. Als beginner kan het voor u op de een of andere manier moeilijk zijn om het gebruik van het genoemde trefwoord te begrijpen, maar geen zorgen!
Dit bericht zal de ' deze ” trefwoord en het gebruik ervan in JavaScript.
Wat is 'dit' in JavaScript?
“ deze ” is het trefwoord in JavaScript dat verwijst naar een object dat het bestaande codeblok uitvoert. Het vertegenwoordigt een object dat de huidige functie aanroept. Het wordt op verschillende manieren in meerdere scenario's gebruikt, zoals:
-
- In methode
- Bij het afhandelen van evenementen
- In functies
Laten we elk van de genoemde toepassingen een voor een bekijken!
Hoe 'dit' te gebruiken in JavaScript-methoden?
“ deze ” wordt in JavaScript-methoden gebruikt als een impliciete binding. Wanneer de functie wordt aangeroepen met behulp van een object en een punt, wordt deze als impliciete binding beschouwd en ' deze ” wijst het object aan tijdens de functie-aanroep.
Voorbeeld
Eerst zullen we een object maken met enkele eigenschappen en een methode en vervolgens de ' deze ” sleutelwoord om de waarden van de eigenschappen van het object te krijgen:
var personInfo = {
naam: 'John' ,
leeftijd : twintig ,
informatie: functie ( ) {
console.log ( 'Hé! Ik ben' + deze.naam + ' en ik ben ' + deze.leeftijd + ' jaar oud' ) ;
}
}
Bel vervolgens de ' informatie() ”-methode samen met de objectnaam:
Het is te zien dat de opgegeven eigenschapswaarden van het huidige object met succes worden weergegeven:
Als u gebruik wilt maken van ' deze ” volg bij het afhandelen van gebeurtenissen het onderstaande gedeelte.
Hoe 'dit' te gebruiken in JavaScript-gebeurtenisafhandeling?
Bekijk in dit voorbeeld het gebruik van de “ deze ” trefwoord in gebeurtenisafhandeling. Bekijk hiervoor een voorbeeld waarin we onze knop met een enkele klik verbergen. Maak hiervoor een knop aan en voeg een “ bij klikken() ” gebeurtenis mee om toegang te krijgen tot de eigenschap style.display met de “ deze ” trefwoord dat de knop verbergt wanneer erop wordt geklikt:
< h3 > Klik om de knop te verbergen h3 >< knop bij klikken = 'this.style.display='none'' > Klik hier ! knop >
Uitgang:
Als u in de war bent over het gebruik van de “ deze ” trefwoord in door de gebruiker gedefinieerde functies in JavaScript, volg de gegeven sectie.
Hoe 'dit' te gebruiken in JavaScript-functies?
Tijdens het gebruik ' deze ” in functies zijn er drie soorten bindingen in JavaScript, waaronder:
-
- Standaard binding
- Impliciete binding
- Expliciete binding
Laten we ze afzonderlijk begrijpen!
Voorbeeld 1: Gebruik van dit trefwoord in Default Binding
Bij standaardbinding wordt de “ deze ” sleutelwoord fungeert als een globaal object. Het wordt meestal gebruikt in zelfstandige functies.
Laten we het genoemde concept met een voorbeeld begrijpen.
Eerst maken we een variabele ' x ' en ken het de waarde ' vijftien ”:
var x = vijftien ;
Definieer vervolgens een functie met de naam ' functieDB() ” en zijn functiedefinitie, maak een variabele met dezelfde naam “ x ” en ken het een waarde toe “ 5 ', druk vervolgens de waarde af met de ' console.log() ” methode met “ deze trefwoord:
var x = 5 ;
console.log ( deze X ) ;
}
Bel als laatste de “ functieDB() ” functie:
Door het gebruik van de “ deze ” trefwoord, geeft de uitvoer de waarde van “ x ' net zo ' vijftien ” omdat het fungeert als een globaal object en het proces wordt genoemd “ Dynamische binding ”:
Voorbeeld 2: Gebruik van dit trefwoord in Impliciete Binding
Wanneer de functie wordt aangeroepen door een object of een puntsymbool, ' deze ” trefwoord fungeert als een impliciete binding. Het wijst het object aan tijdens de functieaanroep.
In dit voorbeeld zullen we een functie definiëren “ informatie() ” en gebruik de “ deze ” trefwoord in de functiedefinitie:
functie info ( ) {console.log ( 'Hé! Ik ben' + deze.naam + ' en ik ben ' + deze.leeftijd + ' jaar oud' )
}
Maak vervolgens een object met de naam ' persoonInfo ” met gedefinieerde eigenschappen:
naam: 'John' ,
leeftijd : twintig ,
info: info
}
Roep nu de functie langs object aan:
Uitgang:
Voorbeeld 3: Gebruik van dit trefwoord in expliciete binding
Expliciete binding wordt ook wel “ harde binding ” omdat de functie krachtig wordt aangeroepen om een bepaald object te gebruiken voor “ deze ” bindend, zonder een eigenschapsfunctieverwijzing op het object te plaatsen. Hiervoor kunnen call(), apply() en bind() methoden worden gebruikt.
We zullen nu dezelfde functie gebruiken met de naam ' informatie() ” gedefinieerd in het vorige voorbeeld. Maak vervolgens een object met de naam ' persoonInfo ” met de volgende waarden:
var personInfo = {naam: 'John' ,
leeftijd : twintig
}
Voor het aanroepen van de functie genaamd “ informatie() ”, gebruiken we de “ telefoongesprek() ” en geef het gemaakte object door als argument:
Omdat de info() geen deel uitmaakt van het object, hebben we er nog steeds expliciet toegang toe:
Om een functie expliciet aan te roepen, kun je ook de methodes apply() en bind() gebruiken. De methode apply() is identiek aan de methode call(), terwijl de methode bind() een nieuwe functie maakt met dezelfde hoofdtekst en hetzelfde bereik die zich op dezelfde manier gedraagt als de oorspronkelijke functie. De methode bind() kan worden gebruikt om een functie terug te geven die u later kunt gebruiken.
Gebruik de volgende instructie om info() aan te roepen met de methode apply():
info.solliciteer ( persoonInfo ) ;
Het geeft dezelfde uitvoer als de methode call() geeft:
Voor bellen ' informatie() ' met de ' binden() ”-methode, gebruik dan de gegeven instructie:
Uitgang:
We hebben alle essentiële informatie met betrekking tot de ' deze ” trefwoord.
Conclusie
“ deze ” is het trefwoord in JavaScript dat verwijst naar een object dat het bestaande codeblok uitvoert. Het vertegenwoordigt het object dat de huidige functie aanroept. Het wordt op verschillende manieren in meerdere scenario's gebruikt, inclusief methoden, gebeurtenisafhandeling en functies. In dit bericht hebben we de ' deze ” trefwoord in JavaScript.