Javascript afsluitend voorbeeld

| | | | | | | | | | | | | | | | | | | | | | | | |

Een van de grootste wachtwoorden in JavaScript is afsluiten. Hij is het onderwerp van veel vragen over sollicitatiegesprekken bij FAANG-bedrijven. In dit artikel zullen we het hebben over hek en doel, de concepten illustreren met eenvoudige voorbeelden en eindigen met een voorbeeldvraag uit een interview met een van de grootste techgiganten.

Als iemand je vertelt dat iets wel of geen deel uitmaakt van een project, wat betekent dat dan?

Ik zou graag willen denken aan een periscoop of een telescoop als ik denk aan het antwoord op deze vraag. Deze tools laten ons allerlei dingen zien binnen de grenzen van de lens die hij heeft: hij is in veld. Als het buiten bereik is, kunt u niet verder kijken dan de diameter van de lens. En iets buiten de diameter verlichten is niet mogelijk. U moet hierover nadenken, aangezien we het hebben over drie zeer belangrijke en verschillende soorten scopes in JavaScript: lokaal, globaal en lexicaal.

Lokale scope

De lokale scope is de kleinste van de drie scopes die we vandaag zullen bespreken. Wanneer we een functie declareren, wordt alles tussen vierkante haken ({}) als lokaal voor de functie beschouwd. Wanneer de JavaScript-engine de functie leest, declareert het de variabelen; wanneer het eindigt, worden de variabelen vernietigd.

Zoals u kunt zien, wanneer "console.log ()" het resultaat is van de aangeroepen begroetingsfunctie, kunnen we toegang krijgen tot de WebsiteName na de functie gespeeld. Dit geeft ons het kanaal "Hallo Karma Career" waarnaar we op zoek waren. Zoals reeds vermeld, genereert de console.log () van de variabele die in de functie is gedeclareerd een fout omdat deze niet kan worden gedefinieerd .

, de reden waarom WebsiteName niet gedefinieerd is, is omdat variabelen binnen functies worden gemaakt wanneer ze worden aangeroepen en vervolgens worden vernietigd wanneer de terminalinstructie wordt uitgevoerd. Alles buiten de functie heeft geen toegang tot dingen binnen de functie, tenzij het heeft een bepaalde configuratie.

algemeen bereik

Dit volgende veld is vrijwel een letterlijke vertaling van de zin. Een globaal bereik neemt elementen die buiten een functie zijn gedeclareerd en reserveert ze in een spatie waar alle scripts, methoden en functies ze kunnen benaderen en gebruiken voor hun eigen logica.

Wat doet de bovenstaande code als console.log () telt aan het einde van de code? Wat hoop je dat er gaat gebeuren?

Laten we eens kijken naar de code: .

  1. variabele teller gedeclareerd en gestart in de globale omgeving
  2. Een functie toegevoegd die is gedeclareerd in de globale omgeving.
  3. Add wordt aangeroepen.
  4. de tellervariabele gedeclareerd en gestart in de locale .
  5. verhoogt de lokale teller met 1 ‚áê omdat het lokaal is en niet globaal?
  6. De teller wordt geretourneerd. De uiteinden van de functie.
  7. Toevoegen wordt opnieuw aangeroepen
  8. Voer stap 4 tot en met 6 uit.
  9. Herhaal stap 3 opnieuw 6.a
  10. console.log (teller), ‚áê wat wordt geretourneerd?

Aangezien de functie eindigt wanneer de teller 1 is, wordt onze lokale tellervariabele opnieuw gedeclareerd en herstart op 0 elke keer dat de functie wordt uitgevoerd. Wat er ook gebeurt, de teller stopt lokaal altijd bij 1.

Als een functie een variabele binnen zijn bereik vindt, zoekt het niet naar het globale bereik van de variabele - dus de globale variabele verandert nooit. Dan zal onze console.log () 0 genereren omdat onze variabele die het dichtst in de omgeving van deze instructie is gedefinieerd zich in de globale omgeving bevindt.

Lexicale scope

Lexicale reikwijdte is een van de fundamentele concepten van JavaScript. Het is het idee dat het maken van een functie of een variabele toegankelijk zal zijn voor bepaalde delen van de code en daarom ontoegankelijk voor andere delen van de code. Het hangt allemaal af van waar de declaratie van elke variabele en functie is.

Laten we eens kijken naar dit codeblok:.

Hier hebben we een set geneste functies. De functie init () declareert een variabele genaamd var1, declareert een functie genaamd second en roept second () aan.

Als de compiler deze code voor de eerste keer doorloopt, onderzoekt hij op hoog niveau wat we hebben:

Op dit moment kunnen we niets anders zien in de init () - we weten alleen dat de functie bestaat wanneer onze init () -functie wordt aangeroepen, de compiler kijkt nog een keer op hoog niveau naar wat er in de functie zit:

  1. var1.
  2. seconden ()
  3. seconde () oproepen

de init () weet niets over wat er binnen het blok seconds () gebeurt. Het kan alleen zien wat is er in zijn lexicale omgeving - de omringende staat.

Elke functie die genest is, bevindt zich in een kleinere dna-container, zoals een set geneste Russische matroesjka`s (zie bovenaan de pagina). pagina bijvoorbeeld als u niet zeker weet welke bij zijn). De poppen op haar weten wat er in hun container omgaat en wat er al is gebeurd of heeft/gelezen in de ouder. De grotere pop weet bijvoorbeeld alleen dat de volgende pop in zijn houder zit. Ze kent geen van de andere poppen in de set, alleen wat zich in haar lexicale omgeving (haar toestand) bevindt en wat er al is gebeurd (de buitenste wereld).

Eigenlijk weten we twee dingen:

  1. Buiten domein kan intern domein niet zien
  2. De interne scope heeft toegang tot het externe domein.

Omdat de buitenkant niet kan zien wat vanbinnen aan de hand is, kunnen we gerust stellen dat dit een eenrichtingsverkeer is. Het interieur kan de variabelen van het exterieur zien en gebruiken, maar het exterieur kan het interieur niet zien. Dit wordt lexicale finaliteit genoemd.

Het mooie van lexicale reikwijdte is dat de waarde van een variabele wordt bepaald door de plaatsing in de code . Functies zoeken eerst naar de betekenis van een variabele in zijn landinstelling - als hij deze niet kan vinden, gaat hij naar de functie die die functie definieert. Als het het daar niet vindt, gaat het omhoog naar de volgende gedefinieerde functie.

Dit wordt een heel belangrijk concept in JavaScript dat steeds weer naar voren zal komen naarmate je meer leert over het JavaScript-framework en hoe ze werken. Je kunt van buitenaf gaan, maar je kunt nooit de andere kant op "omhoog". Dit is erg belangrijk als het gaat om het hoofdonderwerp in kwestie: afsluiten .

Sluiting

De definitie van sluiting lijkt erg op die van een lexicale scope. Het belangrijkste verschil tussen de twee is dat sluiting een functie van hogere orde is en lexicale omvang is dat niet. Een functie van hogere orde heeft één basiskenmerk: hij retourneert een functie of gebruikt een functie als parameter.

De sluiting is een functie die zijn lexicale omvang kan bereiken, zelfs wanneer deze functie later wordt aangeroepen.

Zowel afsluiting als lexicale scope hebben hun eigen variabelen, hebben toegang tot variabelen en parameters van een bovenliggende functie en kunnen globale variabelen gebruiken. met de volgende code:

  1. Gegroet () de functie bestaat, maar we kennen de inhoud nog niet.
  2. greetUser bestaat, maar ik weet de inhoud nog niet
  3. greetUser () - deze regel roept de vorige aan, die op zijn beurt de begroeting ( ) functie.
  4. userName declare
  5. welcomeGreeting () bestaat, maar ik ken de inhoud nog niet
  6. De Return-instructie onder het blok welcomeGreeting () geeft dezelfde functie terug
  7. console.log (`Hallo` + gebruikersnaam) ; Onze console.log hier heeft toegang tot het bovenliggende bereik om de waarde van gebruikersnaam te krijgen
  8. Verklaring van de terminal die de functie beëindigt en de betekenis van de variabelen in het codeblok vernietigt.
  9. In deze code geven we informatie door door functies samen te nesten, zodat we later toegang hebben tot het nest van de ouders



    Conclusie

    In dit artikel hebben we een vrij zwaar JavaScript-onderwerp behandeld: bereik en sluitingen. Ik zou aanraden om te vertakken en verschillende artikelen over dit onderwerp te lezen. De manier waarop dit wordt onderwezen kan vanuit verschillende perspectieven komen - wat natuurlijk betekent dat er veel manieren zijn om te leren. Ik hoop dat je dit alfabetboek nuttig vond! Veel succes met je verdere studie over sluitingen!