JavaScript-functies

JavaScript-functies kunnen meer dan alleen maar een reeks codes omsluiten in afwachting van de uitvoering van de oproep. Functies zijn in de loop van de tijd geëvolueerd, wat heeft geleid tot nieuwe definities, uitvoeringsmethoden en syntaxis. Dit bericht behandelt enkele van de huidige rollen die JavaScript-functies tot nu toe hebben gespeeld.

Het kennen van de verschillende manieren om functies uit te drukken en te definiëren, opent de mogelijkheid om een ​​logica op een meer optimale manier in JavaScript te implementeren . Ook kunt u de interviewvragen gemakkelijker beantwoorden.

Functie Uitdrukkingen

Als u eenvoudigweg een functie opgeeft met functiezoekwoord, optionele parameters en hoofdtekstcode, is dit een functieverklaring .

Zet die verklaring in een JavaScript-uitdrukking (zoals in een toewijzing of een rekenkundige uitdrukking), het wordt een functie- uitdrukking .

 // Functie declaratiefunctie function_name () {}; // Functie-expressie var function_name = function () {}; 

Alle JavaScript-verklaringen worden tijdens de evaluatie gehesen (naar boven verplaatst). Vandaar het schrijven van een functieaanroep voordat de functiedeclaratie in orde is (omdat de declaratie toch omhoog zal worden verplaatst).

 function_name (); // functie aanroep [WORKS] functie function_name () {}; 

Functie-uitdrukkingen worden echter niet gehesen omdat de functies onderdeel worden van de uitdrukkingen en geen op zichzelf staande verklaringen zijn.

 function_name (); // functie aanroep [WILL NOT WORK] var function_name = function () {}; 

Directe opgevraagde functie-expressie (IIFE)

Het is een functie-uitdrukking waarvan de code onmiddellijk wordt uitgevoerd (slechts één keer wanneer deze wordt geëvalueerd). U kunt er een aanmaken door simpelweg () (syntaxis gebruikt voor het aanroepen van een functie) toe te voegen direct na een functie-uitdrukking. Ze kunnen anoniem zijn (geen naam om mee te bellen).

Hieronder staan ​​de twee meest voorkomende syntaxis om IIFE te maken:

 (function optional_function_name () {// body} ()); 

en

 (function optional_function_name () {// body}) (); 

De haakjes rond de functieverklaring zetten deze om in een uitdrukking en voegen vervolgens () nadat deze de functie heeft aangeroepen. U kunt andere manieren gebruiken om IIFE te maken voor zolang u () toevoegt na een functie-uitdrukking (zoals hieronder), maar de voorkeursmethoden zijn de bovenstaande twee.

 // Enkele manieren om de functie IIFEs! Te maken () {/ * ... * /} (); + functie () {/ * ... * /} (); nieuwe functie () {/ * ... * /}; 

IIFE is ideaal voor het schrijven van code die maar één keer hoeft te worden uitgevoerd, naamsvermelding, het maken van sluitingen, het maken van privévariabelen en meer. Hieronder is een voorbeeld van gebruik van IIFE.

 var page_language = (function () {var lang; // Code om de taal van de pagina te krijgen, retourneer lang;}) (); 

De code om de taal van de pagina te krijgen wordt slechts een keer uitgevoerd (bij voorkeur nadat de pagina is geladen). Het resultaat wordt opgeslagen in page_language voor later gebruik.

methoden

Wanneer een functie de eigenschap van een object is, wordt deze de methode genoemd. Omdat een functie ook een object is, is een functie binnen een andere functie ook een methode. Hieronder ziet u een voorbeeld van een methode binnen een object.

 var calc = {add: functie (a, b) {return a + b}, sub: functie (a, b) {return ab}} console.log (calc.add (1, 2)); // 3 console.log (calc.sub (80, 2)); // 78 

De add en sub zijn methoden van het calc object.

Nu voor een functie binnen functioneringsvoorbeeld:

 functie toevoegen (a) {return-functie (b) {return a + b;}} console.log (add (1) (2)); // Uitgang is 3 

De geretourneerde anonieme functie is een methode voor het add van functies.

Opmerking: aangezien parameter ( a ) van functie add in het bovenstaande voorbeeld beschikbaar is voor de volgende functie-aanroep, wordt dit type proces currying genoemd .

constructors

Wanneer u een new trefwoord vóór een functie toevoegt en dit oproept, wordt het een constructor die instanties maakt. Hieronder is een voorbeeld waarbij constructors worden gebruikt om exemplaren van Fruit en waarden worden toegevoegd aan de eigenschappen van elk Fruit .

 function Fruit () {var naam, familie; // Wetenschappelijke naam en familie this.getName = function () {retournaam;}; this.setName = function (value) {name = value}; this.getFamily = function () {return family;}; this.setFamily = function (value) {family = value}; } var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var orange = new Fruit (); orange.setName ("Citrus Ãà ¢ Â? Â" sinensis "); orange.setFamily ("Rutaceae"); console.log (orange.getName ()); // "Citrus Ãà ¢ Â? Â" sinensis "console.log (apple.getName ()); // "Malus domestica" console.log (orange.getFamily ()); // "Rutaceae" 

Pijlfuncties (ES6-standaard) [Alleen in Firefox]

Een nieuwe functiedefinitie van ES6 Standard biedt een kortere syntaxis voor functie-expressie. De syntaxis is

 () => {/ * body * /} 

Deze voorbeeldfunctie:

 var sing = function () {console.log ('singing ...')}; 

is hetzelfde als:

 var sing = () => {console.log ('singing ...')}; 

Pijlfuncties zijn anoniem en hebben geen eigen waarde, this binnenin zal hetzelfde zijn als this in de omsluitende code. U kunt het ook niet wijzigen in een constructor met new zoekwoord.

Ze zijn handig als u wilt dat this binnen een functie hetzelfde is als buiten en de kortere syntaxis maakt de code voor de schrijffunctie binnen de functie bondig (zoals hieronder)

 setInterval (function () {console.log ('message')}, 1000); 

in

 setInterval (() => console.log ('message'), 1000); 

Generatorfuncties (ES6-standaard) [Alleen in Firefox]

Een andere nieuwe functiedefinitie van ES6 Standard is de generatorfunctie. Generatorfuncties kunnen de uitvoering stoppen en voortzetten. Zijn syntaxis is:

 function * function_name () {} 

of

 function * function_name () {} 

Generator-functies maken iterators. De next methode van de iterator wordt vervolgens gebruikt om de code in de generatorfunctie uit te voeren totdat het sleutelwoord wordt bereikt. Daarna wordt de geïtereerde waarde geïdentificeerd door het sleutelwoord yield geretourneerd door de generatorfunctie en wordt de uitvoering stopgezet.

De generatorfunctie wordt opnieuw uitgevoerd wanneer de next methode wordt aangeroepen totdat het volgende yield is bereikt. Nadat alle yield zijn uitgevoerd, wordt de geretourneerde waarde undefined geretourneerd.

Hieronder is een eenvoudig voorbeeld:

 function * generator_func (aantal) {voor (var i = 0; i 
Hier is nog een voorbeeld:
 functie * randomIncrement (i) {opbrengst i + 3; opbrengst i + 5; opbrengst i + 10; opbrengst i + 6; } var itr = randomIncrement (4); console.log (. itr.next () waarde); // 7 console.log (itr.next (). Waarde); // 9 console.log (itr.next (). Waarde); // 14 
Er is ook een yield* -expressie die de waarde doorgeeft aan een andere generatorfunctie
 functie * fruit (fruit) {oogst * groenten (fruit); opbrengst "Druiven"; } functie * groenten (fruit) {oogst fruit + "en spinazie"; opbrengst fruit + "en Broccoli"; opbrengst fruit + "en komkommer"; } var itr = fruits ("Apple"); console.log (. itr.next () waarde); // "Apple and Spinach" console.log (itr.next (). Waarde); // "Apple and Broccoli" console.log (itr.next (). Waarde); // "Apple and Cucumber" console.log (itr.next (). Waarde); // "Grapes" console.log (itr.next (). Waarde); // undefined 
Generatorfuncties zijn handig als u de waarden één voor één wilt doorlopen op het door u gewenste punt in de code door deze te onderbreken, in plaats van in één keer door een reeks door te lussen.
Conclusie 
Ik heb een lijst met referenties hieronder opgenomen, waar u links naar verwijzingen en artikelen vindt die dieper ingaan op verschillende onderwerpen. Beide ES6-standaardfuncties werken op dit moment alleen in Firefox .
Referenties 
ECMAScript-taal: functies en klassen
Onmiddellijk-opgevraagde functie-expressie (IIFE)
De basisprincipes van ES6-generatoren
Pijl functies
Functie - Mozilla Developer Network







        

          
          

		  
The Rise of Trolling & Decline of Online Etiquette
            
Of we het nu toegeven of niet, publiek menselijk gedrag wordt beïnvloed, ja, gedicteerd door bepaalde normen die beleefde, geciviliseerde samenleving als acceptabel beschouwt. We worden niet bang voor onschuldige opmerkingen van vreemden, we noemen elkaar geen afwijkende namen of harde obsceniteiten, en we volgen elkaar zeker niet meedogenloos om de kleinste kritiek te leveren over de nieuwste creatie of gedachte van het doelwit.
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
30 beste gratis tools en plug-ins voor het maken van schermafbeeldingen
            
Het valt niet te ontkennen dat schermafbeeldingen de beste manier zijn om de activiteit van uw computer vast te leggen of een gids te maken, hetzij om voor uzelf te houden of om met anderen te delen. Wat de meeste gebruikers echter dwarszit, is welk hulpmiddel moet worden gebruikt om snel en kwalitatief goede screenshots te maken 
			
(Technische en ontwerptips)