JavaScript-toiminnot

JavaScript-toiminnot kykenevät pelkästään vain liittämään joukon koodeja odottaessaan puhelun suorittamista. Toiminnot ovat kehittyneet ajan myötä, mikä johtaa uusiin määritelmiin, suoritusmenetelmiin ja syntakseihin. Tämä viesti kattaa joitakin nykyisistä rooleista, joita JavaScript-toiminnot ovat toistaiseksi toistaneet.

Toiminnan eri ilmaisu- ja määritystapojen tunteminen avaa mahdollisuuden logiikan toteuttaminen optimaalisemmalla tavalla JavaScriptissä. Voit myös vastata haastattelukysymyksiin helpommin.

Toimintojen lausekkeet

Kun vain ilmoitat toiminnon toimia avainsana, valinnaiset parametrit ja koodirunko, se on a toimia ilmoitus.

Laita tämä ilmoitus JavaScript-lausekkeeseen (kuten tehtävään tai aritmeettiseen lausekkeeseen), se tulee a toimia ilmaisu.

// Toimintoilmoitusfunktio funktion_nimi () ; // Toimintojen lauseke var function_name = function () ; 

Kaikki JavaScript-ilmoitukset nostetaan (siirryttiin soveltamisalaan) arvioinnin aikana. Siksi kirjoitetaan toimintopuhelu ennen kuin funktion ilmoitus on kunnossa (koska ilmoitus siirretään joka tapauksessa ylöspäin).

funktion_nimi (); // toimintopuhelu [TOIMINNOT] funktion_nimi () ; 

Toiminnallisia lausekkeita ei kuitenkaan nosteta, koska toiminnot ovat osa lausekkeita eivätkä ole erillisiä ilmoituksia.

funktion_nimi (); // toimintopuhelu [ei toimi] var funktio_nimi = toiminto () ; 

Välittömästi otettu funktion ilmaisu (IIFE)

Se on funktion ilmaus, jonka koodi suoritetaan välittömästi (vain kerran, kun se on arvioitu). Voit luoda sen yksinkertaisesti lisäämällä () (syntaksi, jota käytetään funktion kutsumiseen) heti funktion ilmaisun jälkeen. Ne voivat olla nimettömiä (ei nimeä nimetä).

Alla on kaksi yleisintä syntaksi IIFE: n luomiseksi:

(toiminto option_function_name () // body ()); 

ja

(toiminto option_function_name () // body) (); 

Sulkumerkit toiminnon ilmoituksen ympärille muuttavat sen lausekkeeksi ja lisäämällä sen () sen jälkeen, kun se kutsuu toimintoa. Voit käyttää muita tapoja luoda IIFE: tä niin kauan kuin lisäät () funktion ilmentymisen jälkeen (kuten alla), mutta edulliset menetelmät ovat edellä mainitut kaksi.

// Joitakin tapoja luoda IIFE-toimintoa () / *… * / (); + toiminto () / *… * / (); uusi toiminto () / *… * /; 

IIFE sopii erinomaisesti koodin kirjoittamiseen, joka tarvitsee suorittaa vain kerran, nimipaikan luominen, sulkemisten luominen, yksityisten muuttujien luominen ja paljon muuta. Alla on esimerkki IIFE-käytöstä.

var page_language = (toiminto () var lang; // koodi, jolla saat sivun paluukielen kielen;) (); 

Sivun kielen saamiseksi käytettävä koodi suoritetaan vain kerran (mieluiten sivun latausten jälkeen). Tulos tallennetaan page_language myöhempää käyttöä varten.

menetelmät

Kun toiminto on kohteen ominaisuus, sitä kutsutaan menetelmäksi. Koska funktio on myös objekti, toisen toiminnon funktio on myös menetelmä. Alla on esimerkki kohteen sisäisestä menetelmästä.

var calc = add: toiminto (a, b) return a + b, ali: toiminto (a, b) return a-b console.log (calc.add (1,2)); // 3 konsoli.log (las.sub (80,2)); // 78 

lisätä ja sub toiminnot ovat lask esine.

Nyt toiminto toiminnallisessa esimerkissä:

function add (a) return function (b) return a + b; console.log (lisää (1) (2)); // Lähtö on 3 

Palautettu anonyymi toiminto on toimintatapa lisätä.

Huomautus: Koska parametri () lisätä edellä olevassa esimerkissä on käytettävissä seuraavaa toimintoa kutsutaan, tämän tyyppistä prosessia kutsutaan Parkitus.

Constructors

Kun lisäät Uusi avainsana ennen funktiota ja kutsutaan sitä, siitä tulee rakentaja, joka luo instansseja. Alla on esimerkki, jossa rakentajia käytetään luomaan esimerkkejä hedelmä ja arvot lisätään kullekin hedelmä's ominaisuudet.

toiminto Hedelmät () var nimi, perhe; // Tieteellinen nimi ja perhe this.getName = function () return name;; this.setName = toiminto (arvo) name = value; this.getFamily = toiminto () paluu perhe;; this.setFamily = toiminto (arvo) family = value;  var apple = uusi hedelmä (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var orange = uusi hedelmä (); orange.setName ("Citrus Ã?  ??¢Â ??  ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Citrus Ã?¢Â ??  ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Rutaceae " 

Nuolitoiminnot (ES6-standardi) [Vain Firefoxissa]

ES6-standardin uusi funktionmääritys tarjoaa lyhyemmän syntaksin funktion ilmaisulle. Syntaksi on

() => / * runko * / 

Tämä otosfunktio:

var sing = function () console.log ('laulaa…'); 

on sama kuin:

var sing = () => console.log ('laulaa…'); 

Nuolitoiminnot ovat nimettömiä eikä niillä ole omaa Tämä arvo, Tämä sen sisällä on sama kuin Tämä mukana olevaan koodiin. Et voi myöskään muuttaa sitä rakentajaksi Uusi avainsana.

Ne ovat hyödyllisiä, kun haluat Tämä funktion sisällä, joka on sama kuin ulkopuolinen, ja sen lyhyempi syntaksi tekee koodin kirjoitustoiminnosta funktion tiiviin (kuten alla)

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

osaksi

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

Generaattorin toiminnot (ES6-standardi) [Vain Firefoxissa]

Toinen uusi ES6 Standard -toiminnon määritelmä on Generator Function. Generaattorin toiminnot kykenevät pysäyttämään ja jatkamaan sen toteuttamista. Sen syntaksi on:

toiminto * funktion_nimi ()  

tai

toiminto * funktion_nimi ()  

Generaattorin toiminnot luovat iteraattoreita. Iteraattori Seuraava menetelmää käytetään sitten suorittamaan koodin generaattoritoiminnon sisällä kunnes tuotto avainsana on saavutettu. Sen jälkeen. \ T tuotto avainsana palautetaan generaattorin toiminnolla ja toteutus pysäytetään.

Generaattori toimii uudelleen, kun Seuraava menetelmää kutsutaan vasta seuraavaan tuotto avainsana on saavutettu. Kun kaikki tuotto ilmaisut suoritetaan, tuotettu arvo palautuu määrittelemätön.

Alla on yksinkertainen esimerkki:

toiminto * generator_func (count) for (var i = 0; i 
Tässä on toinen esimerkki:
 
toiminto * satunnainen lisäys (i) saanto i + 3; saanto i + 5; saanto i + 10; saanto i + 6;  var itr = randomIncrement (4); console.log (itr.next (). arvo); // 7 console.log (itr.next ().) Arvo); // 9 console.log (itr.next ().) Arvo); // 14 
 
On myös a saanto * ilmaisu, joka siirtää arvon toiselle generaattoritoiminnolle
 
toiminto * hedelmät (hedelmät) saanto * kasvikset (hedelmät); tuotto "Viinirypäleet";  -toiminto * kasvikset (hedelmät) hedelmä + hedelmä + ja pinaatti ”; tuottaa hedelmiä + "ja parsakaalia"; hedelmiä + "ja kurkkua";  var itr = hedelmät ("Apple"); console.log (itr.next (). arvo); // "Apple ja pinaatti" console.log (itr.next ().) Arvo; // "Apple ja Broccoli" console.log (itr.next ().) Arvo); // "Apple ja kurkku" console.log (itr.next ().) Arvo; // "Viinirypäleet" console.log (itr.next (). -Arvo); // määrittelemätön 
 
Generaattoritoiminnot ovat hyödyllisiä, jos haluat siirtyä arvojen mukaan yksi kerrallaan haluamassasi kohdassa koodissa pysäyttämällä sen sen sijaan, että samaan aikaan kuin silmukoita läpi taulukon.
 
johtopäätös
 
Olen sisällyttänyt alla olevien viitteiden luettelon, josta löydät linkkejä viitteisiin ja artikkeleihin, jotka käsittelevät eri aiheita erikseen. Molemmat ES6-standarditoiminnot toimivat vain Firefoxissa tällä hetkellä.
 
Viitteet
 
ECMAScript-kieli: toiminnot ja luokat
 
Välittömästi otettu funktion ilmaisu (IIFE)
 
ES6-generaattoreiden perusteet
 
Nuolitoiminnot
 
Toimia - Mozilla Developer Network