Share
De tutorial van vandaag komt met dank aan de getalenteerde Cody Lindley, uit zijn gratis ebook: JavaScript Enlightenment. Hij bespreekt het verwarrende deze zoekwoord en de verschillende manieren om de waarde ervan te bepalen en in te stellen.
Om de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial is voor het eerst gepubliceerd in juli 2011.
Accentsconagua
deze Wanneer een functie wordt gemaakt, wordt een sleutelwoord met de naam this gemaakt (achter de schermen), dat linkt naar het object waarin de functie werkt. Op een andere manier gezegd, dit is beschikbaar voor de reikwijdte van zijn functie, maar is een verwijzing naar het object waarvan die functie een eigenschap / methode is.
Laten we eens naar dit object kijken:
Notice hoe binnenkant van de getGender functie hebben we toegang tot de sekse-eigenschap met behulp van puntnotatie (bijv cody.gender) op het cody-object zelf. Dit kan worden herschreven met behulp van deze om toegang te krijgen tot de cody object omdat deze wijst naar de cody voorwerp.
De deze gebruikt in this.gender verwijst eenvoudigweg naar de cody object waarop de functie is
bedrijfs-.
Het onderwerp van deze kan verwarrend zijn, maar het hoeft niet zo te zijn. Onthoud dat gewoon in het algemeen, deze wordt gebruikt binnen functies om te verwijzen naar het object waarin de functie zich bevindt, in tegenstelling tot de functie zelf (uitzonderingen zijn onder andere het gebruik van de nieuwe trefwoord of () aanroepen en van toepassing zijn()).
deze ziet eruit en gedraagt zich als elke andere variabele, behalve dat u deze niet kunt wijzigen. argumenten en alle parameters die naar de functie zijn verzonden, deze is een sleutelwoord (geen eigenschap) in het oproep / activeringsobject. deze Vastbesloten? De waarde van deze, doorgegeven aan alle functies, is gebaseerd op de context waarin de functie tijdens runtime wordt aangeroepen. Let hier op, want dit is een van die eigenaardigheden die je gewoon moet onthouden.
De myObject object in de onderstaande code krijgt een eigenschap genaamd sayFoo, wat naar de sayFoo functie. Wanneer de sayFoo functie wordt aangeroepen vanuit het globale bereik, dit verwijst naar het vensterobject. Wanneer het wordt aangeroepen als een methode van myObject, deze verwijst naar myObject.
Since myObject heeft een eigenschap met de naam foo, die eigenschap wordt gebruikt.
Het is duidelijk dat de waarde van deze is gebaseerd op de context waarin de functie wordt aangeroepen. Overweeg dat beide myObject.sayFoo en sayFoo wijs naar dezelfde functie. Afhankelijk van waar (dat wil zeggen de context) sayFoo () wordt aangeroepen, de waarde van deze is anders.
Als het helpt, is hier dezelfde code met het hoofdobject (d.w.z. venster) expliciet gebruikt.
Zorg ervoor dat u tijdens het doorgeven van functies of meerdere verwijzingen naar een functie beseft dat de waarde van deze zal veranderen afhankelijk van de context waarin u de functie aanroept.
deze en argumenten volgen lexicale reikwijdte. deze Trefwoord Verwijst naar het hoofdobject in geneste functies Je vraagt je misschien af wat er gebeurt deze wanneer het wordt gebruikt in een functie die zich in een andere functie bevindt. Het slechte nieuws zit in ECMA 3, deze verliest zijn weg en verwijst naar het hoofdobject (venster object in browsers), in plaats van het object waarbinnen de functie is gedefinieerd.

In de onderstaande code, deze binnenkant van func2 en FUNC3 verliest zijn zin en verwijst niet naar myObject maar in plaats daarvan naar het hoofdobject.
Het goede nieuws is dat dit zal worden opgelost in ECMAScript 5. Voor nu zou je je bewust moeten zijn van deze hachelijke situatie, vooral als je functies gaat gebruiken als waarden voor andere functies.
Overweeg de onderstaande code en wat er gebeurt wanneer u een anonieme functie doorgeeft aan foo.func1. Wanneer de anonieme functie binnen in wordt gebeld foo.func1 (een functie binnen een functie) de deze waarde in de anonieme functie is een verwijzing naar het hoofdobject.
Nu zul je het nooit vergeten: het deze waarde zal altijd een verwijzing naar het hoofdobject zijn wanneer de hostfunctie is ingekapseld in een andere functie of wordt aangeroepen in de context van een andere functie (nogmaals, dit wordt opgelost in ECMAScript 5).
Zodat de deze waarde gaat niet verloren, je kunt gewoon de scopeketen gebruiken om een verwijzing naar te houden deze in de ouderfunctie. De onderstaande code laat zien hoe, met behulp van een variabele genaamd dat, en door gebruik te maken van de scope, kunnen we de functiecontext beter volgen.

deze De waarde van deze wordt normaal bepaald vanuit de context waarin een functie wordt aangeroepen (behalve wanneer de nieuwe sleutelwoord wordt gebruikt - meer hierover in een minuut), maar je kunt de waarde van overschrijven / beheren deze gebruik makend van van toepassing zijn() of () aanroepen om welk object te definiëren deze verwijst naar bij het oproepen van een functie. Het gebruik van deze methoden is hetzelfde als zeggen: "Hey, bel X-functie, maar vertel de functie om het Z-object te gebruiken als de waarde voor deze."Door dit te doen, de standaardmanier waarop JavaScript de waarde van bepaalt deze is overschreven.
Hieronder maken we een object en een functie. Vervolgens roepen we de functie via aan () aanroepen zodat de waarde van deze binnen de functie gebruikt myObject als de context. De uitspraken in de myFunction functie wordt vervolgens ingevuld myObject met eigenschappen in plaats van het hoofdobject te vullen. We hebben het object gewijzigd deze (binnenkant van myFunction) verwijst.
In het bovenstaande voorbeeld gebruiken we () aanroepen, maar van toepassing zijn() kan ook worden gebruikt. Het verschil tussen beide is hoe de parameters voor de functie worden doorgegeven. Gebruik makend van () aanroepen, de parameters zijn gewoon door komma's gescheiden waarden. Gebruik makend van van toepassing zijn(), de parameterwaarden worden doorgegeven binnen een rangschikking. Hieronder is hetzelfde idee, maar dan met van toepassing zijn().
Wat u hier moet wegnemen, is dat u de standaardmanier waarop JavaScript de waarde van bepaalt, overschrijft
dezein het bereik van een functie.
deze Trefwoord binnen een door de gebruiker gedefinieerde constructorfunctie Wanneer een functie wordt aangeroepen met de nieuwe sleutelwoord, de waarde van deze - zoals het is vermeld in de constructor - verwijst naar de instantie zelf. Anders gezegd: in de constructorfunctie kunnen we het object via gebruiken deze voordat het object daadwerkelijk is gemaakt. In dit geval is de standaardwaarde van deze veranderingen op een manier die niet veel lijkt op gebruiken () aanroepen of van toepassing zijn().
Hieronder hebben we een Persoon constructorfunctie die gebruikt deze om te verwijzen naar een object dat wordt gemaakt. Wanneer een instantie van Persoon is gecreëerd, deze naam verwijst naar het nieuwe object en plaatst een eigenschap met de naam naam in het nieuwe object met een waarde uit de parameter (naam) doorgegeven aan de constructorfunctie.
Nog een keer, deze verwijst naar het "object dat moet zijn" wanneer de constructorfunctie wordt aangeroepen met behulp van de nieuwe trefwoord. Hadden we de nieuwe sleutelwoord, de waarde van deze zou de context zijn waarin Persoon wordt opgeroepen - in dit geval het hoofdobject. Laten we dit scenario eens bekijken.
deze In een prototype-methode verwijst naar een instantie van Constructor Bij gebruik in functies die zijn toegevoegd aan een constructor prototype eigendom, deze verwijst naar de instantie waarop de methode wordt aangeroepen. Stel dat we een gewoonte hebben Persoon() constructorfunctie. Als parameter is de volledige naam van de persoon vereist. Als we de volledige naam van de persoon moeten gebruiken, voegen we een toe whatIsMyFullName methode om de Person.prototype, dus dat allemaal Persoon instanties nemen de methode over. Tijdens gebruik deze, de methode kan verwijzen naar de instantie die deze aanroept (en dus de eigenschappen ervan).
Hier demonstreer ik de creatie van twee Persoon voorwerpen (cody en lisa) en de geërfde whatIsMyFullName methode die het sleutelwoord this bevat om toegang te krijgen tot het exemplaar.
De afhaal hier is dat het sleutelwoord deze wordt gebruikt om te verwijzen naar instanties die worden gebruikt binnen een methode die is opgenomen in de prototype voorwerp. Als de instantie de eigenschap niet bevat, begint de prototypeopzoeking.
- Als de instantie of het object waarnaar wordt verwezen door deze bevat niet de eigenschap waarnaar wordt verwezen, dezelfde regels die van toepassing zijn op elke lookup voor eigenschappen worden toegepast en de eigenschap wordt "opgezocht" in de prototypeketen. Dus in ons voorbeeld, als het voor-en achternaam eigendom was toen nog niet binnen onze instantie voor-en achternaam zou worden gezocht Person.prototype.fullName dan Object.prototype.fullName.
Dit boek gaat niet over JavaScript-ontwerppatronen of het implementeren van een objectgeoriënteerd paradigma met JavaScript-code. Het is niet geschreven om de goede eigenschappen van de JavaScript-taal te onderscheiden van de slechte. Het is niet bedoeld als een complete naslaggids. Het is niet gericht op mensen die nieuw zijn bij het programmeren of die helemaal nieuw zijn voor JavaScript. Dit is ook geen kookboek met JavaScript-recepten. Die boeken zijn geschreven.
