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 der 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 een logica op een meer optimale manier implementeren in JavaScript. Ook kunt u de interviewvragen gemakkelijker beantwoorden.

Functie Uitdrukkingen

Wanneer u eenvoudig een functie opgeeft met functie sleutelwoord, optionele parameters en body of code, het is a functie verklaring.

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 evaluatie gehesen (naar boven verplaatst). Vandaar het schrijven van een functieaanroep voordat de functiedeclaratie in orde is (omdat de aangifte sowieso 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). Je kunt er een maken door simpelweg toe te voegen () (syntaxis gebruikt voor het aanroepen van een functie) 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 ());

(function optional_function_name () // body) ();

Het haakje rond de functieverklaring converteert het naar een uitdrukking en voegt vervolgens toe () nadat het de functie roept. U kunt andere manieren gebruiken om IIFE te maken 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 slechts één keer hoeft te worden uitgevoerd, naamruimten, 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 verkrijgen, retourneert lang;) ();

De code om de taal van de pagina te krijgen, wordt maar één 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 a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

De toevoegen en sub functies zijn methoden van calc voorwerp.

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 werkingsmethode toevoegen.

Opmerking: sinds parameter (een) van functie toevoegen in het bovenstaande voorbeeld is beschikbaar voor de volgende functie aanroep, dit type proces wordt aangeroepen Curry.

constructors

Wanneer u toevoegt nieuwe sleutelwoord vóór een functie en noem het, het wordt een constructor die instances maakt. Hieronder ziet u een voorbeeld waarbij constructors worden gebruikt om exemplaren van te maken Fruit en waarden worden aan elk toegevoegd Fruiteigenschappen.

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 functies deze waarde, deze Binnen zal het hetzelfde zijn als deze in de omsluitende code. Je kunt het ook niet veranderen naar een constructeur met nieuwe trefwoord.

Ze zijn handig voor wanneer je maar wilt deze binnen een functie hetzelfde te zijn als buiten en de kortere syntaxis maakt code voor schrijffunctie binnen functie beknopt (zoals hieronder)

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

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 ()

function * function_name ()

Generator-functies maken iterators. De iterator volgende methode wordt vervolgens gebruikt om de code in de generatorfunctie uit te voeren tot de opbrengst sleutelwoord is bereikt. Daarna wordt de geïtereerde waarde geïdentificeerd door de opbrengst sleutelwoord wordt geretourneerd door de generatorfunctie en de uitvoering wordt gestopt.

De generatorfunctie wordt opnieuw uitgevoerd wanneer de volgende methode wordt aangeroepen tot de volgende opbrengst sleutelwoord is bereikt. Zodra alle opbrengst expressies worden uitgevoerd, de geretourneerde waarde retourneert onbepaald.

Hieronder is een eenvoudig voorbeeld:

function * generator_func (aantal) for (var i = 0; i Hier is nog een voorbeeld:
 function * 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 opbrengst* 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 afzonderlijk op verschillende onderwerpen ingaan. 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