Een functie is een codeblok dat een actie uitvoert of een waarde retourneert. Functies zijn aangepaste code die opnieuw kan worden gebruikt; Dankzij de functies worden programma's modulair en productiever.
Deze tutorial biedt verschillende manieren om een functie te definiëren en aan te roepen en functieparameters in JavaScript te gebruiken.
Functiedefinitie
Functies worden gedefinieerd of gedeclareerd met behulp van het functiesleutelwoord. De functiesyntaxis in JavaScript ziet er als volgt uit:
functienaamOfFunctie() (
// Uit te voeren code
}
Een functiedeclaratie begint met het sleutelwoord functie gevolgd door de naam van de functie. Functienamen volgen dezelfde regels als namen van variabelen: ze kunnen letters, cijfers, onderstrepingstekens en dollartekens bevatten, en worden vaak in kameelletters geschreven. De naam wordt gevolgd door een reeks haakjes die kunnen worden gebruikt voor optionele parameters. De functiecode staat tussen accolades, zoals een for- of if-instructie.
Zoals je misschien hebt gemerkt, wordt de waarde van de naamparameter niet toegewezen in de code; dit gebeurt wanneer de functie wordt aangeroepen. Bij het aanroepen van de functie wordt de gebruikersnaam als argument doorgegeven. Het argument is de werkelijke waarde die aan de functie wordt doorgegeven (in dit geval de gebruikersnaam, bijvoorbeeld 8host).
// Roep de begroetingsfunctie aan met "8host" als argument
begroeten("8host");
De 8host-waarde wordt via de parameter name aan de functie doorgegeven. Nu vertegenwoordigt de naamparameter deze waarde in deze functie. De code voor het bestand greetUser.js ziet er als volgt uit:
// Initialiseer de aangepaste begroetingsfunctie
functie begroet(naam) (
console.log(`Hallo, $(naam)!`);
}
// Roep de begroetingsfunctie aan met "8host" als argument
begroeten("8host");
Wanneer u dit programma uitvoert, krijgt u de volgende uitvoer:
Nu weet je hoe je een functie opnieuw kunt gebruiken.
Naast parameters kunnen variabelen binnen functies worden gedeclareerd. Deze variabelen worden lokaal genoemd en bestaan alleen binnen hun functieblok. Het variabele bereik bepaalt de beschikbaarheid van variabelen; Variabelen die binnen een functie zijn gedefinieerd, zijn niet van buiten de functie toegankelijk, maar kunnen net zo vaak worden gebruikt als de functie waartoe ze behoren in het programma wordt gebruikt.
Waarden retourneren
U kunt meer dan één parameter in een functie gebruiken. Je kunt meerdere waarden aan een functie doorgeven en een waarde retourneren. Maak bijvoorbeeld een sum.js-bestand en declareer daarin een functie die de som van twee waarden, x en y, vindt.
// Initialiseer de add-functie
functie optellen(x, y) (
retour x + y;
}
optellen(9, 7);
Deze code definieert een functie met parameters x en y. De functie krijgt dan de waarden 9 en 7. Voer het programma uit:
Het programma telt de resulterende waarden, 9 en 7, op en retourneert het resultaat 16.
Wanneer het trefwoord return wordt gebruikt, stopt de functie met uitvoeren en retourneert de waarde van de expressie. In dit geval zal de browser de waarde in de console weergeven, maar dit is niet hetzelfde als het gebruik van console.log() voor uitvoer naar de console. Wanneer een functie wordt aangeroepen, voert deze een waarde uit naar waar deze werd aangeroepen. Deze waarde kan worden gebruikt of in een variabele worden geplaatst.
Functie-expressies
In de vorige sectie hebt u een functie gedeclareerd die twee getallen optelt en de resulterende waarde retourneert. U kunt ook een functie-expressie maken door een functie aan een variabele toe te wijzen.
Gebruik de vorige functie om de resulterende waarde toe te passen op de somvariabele.
// Wijs de add-functie toe aan de somconstante
const som = functie optellen(x, y) (
retour x + y;
}
// Roep de functie aan om de som te vinden
som(20, 5);
25
Nu is de constante som een functie. Deze uitdrukking kan worden ingekort door er een anonieme functie van te maken (zo worden functies zonder naamparameter genoemd). Momenteel heet de functie add, maar in functie-expressies wordt de naam meestal weggelaten.
// Functie toewijzen aan somconstante
const som = functie(x, y) (
retour x + y;
}
// Roep de functie aan om de som te vinden
som(100, 3);
103
Nu de functie geen naam meer heeft, is deze anoniem geworden.
Benoemde functie-expressies kunnen worden gebruikt voor foutopsporing.
Pijlfuncties
Tot nu toe werden functies gedefinieerd met behulp van het trefwoord function. Er is echter een nieuwere en beknoptere manier om een functie te definiëren: ECMAScript 6 pijlfuncties. Pijlfuncties worden weergegeven door een gelijkteken gevolgd door een groter dan-teken: =>.
Pijlfuncties zijn altijd anoniem en zijn een soort functie-expressie. Probeer een eenvoudige pijlfunctie te maken om de som van twee getallen te vinden.
// Definieer de vermenigvuldigingsfunctie
const vermenigvuldigen = (x, y) => (
retour x * y;
}
vermenigvuldigen(30, 4);
120
In plaats van een functie te schrijven, kunt u eenvoudigweg => symbolen gebruiken.
Als de functie slechts één parameter heeft, kunnen de haakjes worden weggelaten. In het volgende voorbeeld is de functie vierkant x, zodat er slechts één getal als argument nodig is.
// Definieer vierkante functie
const vierkant = x => (
retour x * x;
}
// Roep de functie aan om het product te vinden
vierkant(8);
64
Opmerking: Als de pijlfunctie geen parameters heeft, moet u lege haakjes () toevoegen.
Pijlfuncties die alleen uit een return-instructie bestaan, kunnen worden ingekort. Als de functie uit slechts één retourregel bestaat, kunt u de accolades en de return-instructie weglaten, zoals in het onderstaande voorbeeld.
// Definieer vierkante functie
const vierkant = x => x * x;
// Roep de functie aan om het product te vinden
vierkant(10);
100
Conclusie
In deze tutorial maak je kennis met het declareren van functies, functie-expressies en pijlfuncties, het retourneren van waarden en het toewijzen van functiewaarden aan variabelen.
Een functie is een codeblok dat een waarde retourneert of een actie uitvoert.
Tags:Variabelen en constanten in JavaScript. Variabelen declareren en er waarden aan toekennen. Globale en lokale variabelen. Constanten gebruiken
Variabelen declareren in JavaScript
Variabelenamen in JavaScript kunnen bestaan uit letters, cijfers, het $-teken en het _-teken, en de variabelenaam mag niet beginnen met een cijfer. Houd er rekening mee dat JavaScript hoofdlettergevoelig is en dat de variabelen a1 en A1 verschillende variabelen zijn. Het wordt niet aanbevolen om Cyrillisch te gebruiken, hoewel het wel mogelijk is.
Variabelen in JavaScript worden gedeclareerd met het trefwoord var:
Var Peremennaya_1 var Peremennaya_2
Het wordt niet aanbevolen om variabelen in JavaScript te gebruiken zonder declaratie. Dit is mogelijk, maar kan tot fouten leiden.
Waarden toewijzen aan variabelen
Een waarde toewijzen aan gedeclareerde variabelen in JavaScript:
Peremennaya_1 = 25 Peremennaya_2 = "De toegewezen tekst staat tussen rechte aanhalingstekens"
U kunt direct na declaratie waarden aan variabelen toewijzen:
Var Peremennaya_1 = 25 var Peremennaya_2 = "De toegewezen tekst staat tussen rechte aanhalingstekens"
De waarde van een variabele in JavaScript kan veranderen tijdens de uitvoering van het programma. Wanneer u tekst naar een variabele schrijft, moet deze tussen rechte aanhalingstekens worden geplaatst.
Lokale en globale variabelen
Als een variabele binnen een functie wordt gedeclareerd, dan is dat zo lokaal en zal alleen binnen deze functie beschikbaar (zichtbaar) zijn. Wanneer een functie wordt afgesloten, worden lokale variabelen in JavaScript vernietigd, zodat u variabelen met dezelfde naam in verschillende functies kunt gebruiken.
Als een variabele buiten de functies wordt gedeclareerd, dan is dat zo mondiaal en zal beschikbaar (zichtbaar) zijn in alle functies binnen de pagina. Globale variabelen worden in JavaScript vernietigd wanneer de pagina wordt gesloten.
Constanten in JavaScript
Constanten zijn ontworpen om uw code gemakkelijker te maken om mee te werken wanneer u dubbele waarden of expressies moet gebruiken. Het is voldoende om de waarde van de constante één keer in te stellen en u kunt deze zoveel gebruiken als u wilt door deze in de code van uw programma's in te voegen. JavaScript heeft geen trefwoord voor het declareren van constanten; in plaats van constanten worden reguliere variabelen gebruikt. Om constanten van variabelen te onderscheiden, worden ze meestal in hoofdletters weergegeven, indien nodig met een onderstrepingsteken:
Var DRUG_CHELOVEKA = "Hond"
Het gegeven voorbeeld van een constante is niet helemaal compleet, aangezien het woord “Hond” al gemakkelijk te onthouden is en waar nodig in te voegen. U kunt constanten in JavaScript gebruiken om complexere waarden vast te leggen en in te voegen, zoals moeilijk te onthouden codes, tekensets, lange tekst, webadressen, e-mailadressen, telefoonnummers en verschillende noteringen.
In JavaScript kunnen constanten worden herschreven als variabelen, maar als je dit doet, gaat de betekenis van de constanten verloren.
Ook ik heb hier een probleem mee gehad. En na een tijdje zoeken naar het antwoord en alle reacties van iedereen bekeken hebben, denk ik dat ik hiervoor een haalbare oplossing heb bedacht.
Het lijkt erop dat de meeste antwoorden die ik ben tegengekomen functies gebruiken om de constanten vast te houden. Zoals veel gebruikers van de VEEL forums posten, kunnen de functies gemakkelijk worden overschreven door gebruikers aan de clientzijde. Ik was geïntrigeerd door Keith Evetts" antwoord dat het constantenobject niet toegankelijk is voor de buitenkant, maar alleen voor de functies aan de binnenkant.
Dus kwam ik met deze oplossing:
Plaats in alles een anonieme functie, zodat de variabelen, objecten, enz. kan niet door de klantzijde worden gewijzigd. Verberg ook de "echte" functies door andere functies de "echte" functies van binnenuit te laten aanroepen. Ik dacht er ook aan om functies te gebruiken om te controleren of een functie door een gebruiker aan de clientzijde is gewijzigd. Als de functies zijn gewijzigd, verander ze dan terug met behulp van variabelen die van binnen "beschermd" zijn en niet kunnen worden gewijzigd.
/*Getest in: IE 9.0.8; Firefox 14.0.1; Chroom 20.0.1180.60m; Niet getest in Safari*/ (function())( /*De twee functies _define en _access zijn afkomstig van Keith Evetts 2009-licentie: LGPL (SETCONST en CONST). Ze zijn hetzelfde, precies zoals hij ze deed, de enige dingen die ik heb veranderd zijn de namen van de variabelen en de tekst van de foutmeldingen. */ //object letterlijk om de constanten vast te houden var j = (); /*Global function _define(String h, mixed m). " definieert" constanten. Het argument "h" is de naam van de const en moet een string zijn, "m" is de waarde van de const en moet bestaan als er al een eigenschap met dezelfde naam in het object aanwezig is houder , dan geven we een foutmelding. Als dat niet het geval is, voegen we de eigenschap toe en stellen we de waarde ervan in. Dit is een "verborgen" functie en de gebruiker ziet geen van uw coderingsaanroepen. U roept de _makeDef() aan. in je code en die functie roept deze functie aan. Je kunt de foutmeldingen veranderen in wat je maar wilt. */ self._define = function(h,m) ( if (typeof h !== "string") ( throw new Error("Ik weet niet wat ik moet doen."); ) if (!m) ( gooi nieuwe fout("Ik weet niet wat ik moet doen."); ) else if ((h in j)) ( gooi nieuwe fout("We hebben een probleem!"); ) else ( j[h] = m; return true; ) ); /*Global function _makeDef(String t, mixed y). Ik noemde het makeDef omdat we "de definitie maken" met dit argument "t" is de de const en hoeft niet alleen uit hoofdletters te bestaan, omdat ik deze binnen de functie in hoofdletters heb ingesteld, "y" is de waarde van de waarde van de const en moet bestaan. Ik maak verschillende variabelen om het voor een gebruiker moeilijker te maken om erachter te komen wat er aan de hand is. Vervolgens roepen we de functie _define aan met de twee nieuwe variabelen. Je roept deze functie in je code aan om de constante in te stellen. Je roept deze functie in je code aan om de constante te krijgen. "); )"+" )";
Het lijkt er ook op dat beveiliging echt een probleem is en dat er geen manier is om uw programmering voor de client te "verbergen". Een goed idee voor mij is om uw code zo te comprimeren dat het voor iedereen, inclusief u, de programmeur, moeilijk is om deze te lezen en te begrijpen. Er is een site waar u naar toe kunt gaan: http://javascriptcompressor.com/. (Dit is niet mijn site, maak je geen zorgen, ik maak geen reclame.) Dit is een site waarmee je Javascript-code gratis kunt comprimeren en versluieren.
- Kopieer alle code in het bovenstaande script en plak deze in het bovenste tekstgebied op de javascriptcompressor.com-pagina.
- Schakel het selectievakje Base62-codering in en schakel het selectievakje Variabelen verkleinen in.
- Druk op de knop Comprimeren.
- Plak en sla het allemaal op in een .js-bestand en voeg het toe aan uw pagina in de kop van uw pagina.
Van de auteur: Misschien zal dit verrassend zijn, maar JavaScript heeft lange tijd geen ondersteuning gehad voor constanten, d.w.z. geregistreerde waarden die tijdens de uitvoering van uw hele script niet veranderen. Bij gebrek aan alternatieven werden de meeste constanten gedeclareerd met behulp van variabelen.
Een voorbeeld van het declareren van een constante met behulp van een variabele:
var DAGENINWEEK = 7;
var DAGENINWEEK = 7; |
Dit is zowel gevaarlijk als onpraktisch, omdat u hierdoor op elk gewenst moment de waarde van de variabele DAYSINWEEK in uw script kunt wijzigen. Ontwikkelaars hebben verschillende manieren bedacht om variabelen die ogenschijnlijk constanten zijn, te onderscheiden van reguliere variabelen in JavaScript, variërend van het benoemen van variabelen in ALLEEN HOOFDLETTERS (de beste praktijk) tot oplossingen waar ik het later over zal hebben. Gelukkig introduceerde de nieuwste versie van ECMAScript (een specificatie die een standaard is) een echte constante:
JavaScript. Snel beginnen
const DAGENINWEEK = 7;
const DAGENINWEEK = 7; |
En nu is DAYSINWEEK toegankelijk als variabele, maar u kunt de waarde ervan nooit wijzigen:
console.log(DAGENINWEEK); > 7 DAGENINWEEK = 8; > fout
troosten. log(DAGENINWEEK); DAGENINWEEK = 8; > fout |
Zodra een constante is gedeclareerd (constanten moeten worden geïnitialiseerd met het trefwoord const, gevolgd door een constante naam die de naamgevingsconventies voor variabelen volgt), wordt de naam ervan gereserveerd: u kunt een variabele niet langer de naam DAYSINWEEK geven en een constante met dezelfde naam hebben , of omgekeerd.
Het const-trefwoord wordt goed ondersteund in moderne browsers: IE11 en Spartan, Firefox 31+, Opera 12+, Safari 5.1.7+, iOS 7 en hoger, samen met Chrome 36+. Er zijn echter een paar belangrijke kanttekeningen:
Chrome biedt geen ondersteuning voor het weergeven van een foutmelding bij een poging een constante te overschrijven. De waarde van de constante zal in geen geval worden gewijzigd, maar een onervaren ontwikkelaar kan denken dat de nieuwe waarde is toegepast omdat er geen fout is opgetreden.
JavaScript. Snel beginnen
Leer de basisprincipes van JavaScript met een praktijkvoorbeeld van hoe u een webapplicatie maakt
Constanten creëren geen nieuw bereik in Webkit. Die. constanten kunnen zichtbaar zijn buiten het huidige bereik.
Met Firefox 35 en lager kunt u de waarde van een const direct wijzigen. Dit is opgelost in Firefox 36+.
Er moet ook worden opgemerkt dat problemen met Webkit alleen optreden als de strikte modus niet wordt gebruikt (wat in een toekomstig artikel zal worden besproken).
Is het nu mogelijk om het const-trefwoord in echte projecten te gebruiken?
De keuze om het trefwoord const al dan niet in uw code te gebruiken, hangt af van verschillende factoren: het belangrijkste is welke browserversies uw sitebezoekers gebruiken, aangezien het gebruik van het trefwoord const in browsers zoals IE10 als een fout wordt beschouwd. . Als u het const-trefwoord in de ontwikkeling wilt gebruiken, maar nog niet klaar bent om het in echte projecten te gebruiken, dan heeft u verschillende opties:
Optie 1: gebruik een transpiler (“transpiler”)
Transpilers transformeren, zoals de naam al doet vermoeden, uw code tijdens het compileren in een andere taal: in dit geval van de versie van de ES6-specificatie (die het trefwoord const introduceerde) naar ES5. Hierdoor kunt u code schrijven in een nieuwere versie van de taal, maar het daadwerkelijke project zal een versie gebruiken die compatibel is met een groter aantal browsers. Eddie Osmani componeerde
Wanneer een programma een waarde moet opslaan om deze later te kunnen gebruiken, wordt die waarde aan een variabele toegewezen. Een variabele is eenvoudigweg een symbolische naam voor een waarde die de mogelijkheid biedt om de waarde op naam te krijgen, dat wil zeggen dat wanneer een programma de naam van een variabele specificeert, de waarde daarvoor wordt vervangen.
De variabele dankt zijn naam aan het feit dat de waarde ervan kan worden gewijzigd tijdens de uitvoering van het programma.
Constanten
Een constante is eenvoudigweg een symbolische naam voor een waarde. Met een constante kunt u met de naam naar een waarde verwijzen, wat betekent dat wanneer een programma de naam van een constante opgeeft, de waarde in plaats daarvan wordt vervangen. Constanten worden gebruikt om gegevens op te slaan die tijdens de uitvoering van het programma niet mogen veranderen.
Voordat een constante kan worden gebruikt, moet deze worden gedeclareerd. Constanten worden gedeclareerd met het trefwoord const, gevolgd door de naam van de constante. Om constanten van variabelen in de programmacode te onderscheiden, werd afgesproken om constantennamen in hoofdletters te geven:
Const MAX = 10;
Zodra een constante is gemaakt, zal een poging om deze opnieuw te definiëren tot een variabele of een poging om een waarde toe te wijzen aan een bestaande constante een fout veroorzaken.
Waarom zijn variabelen en constanten nodig?
Variabelen en constanten helpen de programmacode duidelijker te maken. Laten we een klein voorbeeld bekijken:
Totale prijs = 2,42 + 4,33; // Totale prijs
De cijfers hier kunnen van alles betekenen. Om duidelijk te maken wat hier precies wordt samengevat, kan de waarde 2,42 worden toegekend aan de variabele (of constante) candyPrice (prijs van snoep), en 4,33 aan de variabele (of constante) oilPrice (olieprijs):
Totale prijs = snoepprijs + olieprijs;
Nu, in plaats van te onthouden wat deze waarden betekenen, kun je zien dat het script de prijs van snoep optelt bij de prijs van boter.
Bovendien helpen variabelen en constanten tijd te besparen bij het debuggen van een script. In plaats van overal dezelfde letterlijke waarde te gebruiken, kunt u deze aan het begin van het script aan een variabele (of constante) toewijzen, en vervolgens de variabele (of constante) in plaats van de letterlijke waarde in de rest van de scriptcode gebruiken. Als later wordt besloten om de waarde te wijzigen, zullen wijzigingen in de code niet op verschillende plaatsen moeten worden aangebracht, maar slechts op één plaats - waar de waarde aan de variabele (of constante) is toegewezen.
Reikwijdte van constanten
Voor constanten gelden dezelfde regels als voor variabelen die zijn gedeclareerd met het trefwoord let:
Const MAX = 5; // Globale constante ( const MAX = 10; // Blokconstante console.log(MAX); // 10 ) console.log(MAX); // 5 foo(); // 15 console.log(MAX); // 5 functies foo() ( const MAX = 15; // Lokale constante console.log(MAX); )
Constanten en referentietypen
Wanneer aan een constante een waarde van een referentietype wordt toegewezen, wordt de verwijzing naar de waarde onveranderlijk en blijft de waarde zelf veranderlijk:
Const obj = (a: 5); obj.a = 10; console.log(obj.a); // 10
