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







        

          
          

		  
Hoe Tweets privé delen
            
Twitter heeft een nieuwe functie genaamd Share via Direct Message geïntroduceerd waarmee je tweets privé kunt delen. Je vindt deze functie in de vorm van een knop Envelop (in iOS- en Android-apps) in dezelfde rij als de vind-ik-leuk en de retweet-functie .Hier leest u hoe u dit kunt gebruiken om tweets privé te delen via de Web-, Android- en iOS-app.Pr
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
Hoe u de tarieven voor verlating van uw winkelwagen kunt verlagen op uw e-commercesite
            
Het verlaten van de winkelwagen is een standaardprobleem dat elke e-commerce-site vroeg of laat tegenkomt. Volgens het Baymard Research Institute is het gemiddelde percentage verlaten winkelbezoek maar liefst 68, 63%, een waarde die is berekend op basis van 33 verschillende onderzoeken.Aandacht besteden aan het afrekenen van UX, en ontwerpen voor de specifieke behoeften van uw doelgroep kan het aantal klanten dat hun winkelen verlaat op het laatste cruciale moment, halverwege het afrekenproces, verminderen
			
(Technische en ontwerptips)