Funkcje JavaScript

Funkcje JavaScript są w stanie nie tylko ograniczać się do kilku kodów podczas oczekiwania na wykonanie wywołania. Funkcje ewoluowały w czasie, prowadząc do nowych definicji, metod wykonywania i składni. Ten post obejmie niektóre z obecnych ról, jakie dotychczas pełniły funkcje JavaScript.

Znajomość różnych sposobów wyrażania i definiowania funkcji otwiera możliwość wprowadzenie logiki w bardziej optymalny sposób w JavaScript. Możesz także łatwiej odpowiedzieć na pytania z wywiadu.

Wyrażenia funkcji

Kiedy po prostu określasz funkcję za pomocą funkcjonować słowo kluczowe, opcjonalne parametry i treść kodu, to jest funkcjonować deklaracja.

Umieść tę deklarację w wyrażeniu JavaScript (jak w przypisaniu lub wyrażeniu arytmetycznym), staje się a funkcjonować wyrażenie.

// Funkcja deklaracji funkcji nazwa_funkcji () ; // Wyrażenie funkcji var function_name = function () ; 

Wszystkie deklaracje JavaScript są podnoszone (przenoszone w zakresie) podczas oceny. Stąd pisanie wywołania funkcji przed deklaracją funkcji jest w porządku (ponieważ deklaracja i tak zostanie przeniesiona).

nazwa_funkcji (); // wywołanie funkcji [WORKS] funkcja nazwa_funkcji () ; 

Wyrażenia funkcji nie są jednak podnoszone, ponieważ funkcje stają się częścią wyrażeń i nie są samodzielnymi deklaracjami.

nazwa_funkcji (); // wywołanie funkcji [NIE WORK] var function_name = function () ; 

Wywołanie funkcji natychmiast wywołane (IIFE)

Jest to wyrażenie funkcji, którego kod jest wykonywany natychmiast (tylko raz, gdy jest oceniany). Możesz go utworzyć, po prostu dodając () (składnia używana do wywoływania funkcji) zaraz po wyrażeniu funkcji. Mogą być anonimowe (bez nazwy, z którą można to nazwać).

Poniżej znajdują się dwie najczęstsze składnie do tworzenia IIFE:

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

i

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

Nawias wokół deklaracji funkcji przekształca go w wyrażenie, a następnie dodaje () po wywołaniu funkcji. Możesz użyć innych sposobów tworzenia IIFE tak długo, jak dodasz () po wyrażeniu funkcji (jak poniżej), ale preferowanymi metodami są powyższe dwa.

// Niektóre sposoby tworzenia IIFE! Function () / *… * / (); + funkcja () / *… * / (); nowa funkcja () / *… * /; 

IIFE jest idealny do pisania kodu, który musi być wykonywany tylko raz, nazw, tworzenia zamknięć, tworzenia zmiennych prywatnych i innych. Poniżej znajduje się przykład użycia IIFE.

var page_language = (function () var lang; // Kod, aby uzyskać język zwrotu strony lang;) (); 

Kod, aby uzyskać język strony, jest wykonywany tylko raz (najlepiej po załadowaniu strony). Wynik zostanie zapisany w język_strony do późniejszego wykorzystania.

Metody

Gdy funkcja jest własnością obiektu, nazywana jest metodą. Ponieważ funkcja jest również obiektem, funkcja wewnątrz innej funkcji jest również metodą. Poniżej znajduje się przykład obiektu wewnętrznego.

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

The Dodaj i pod funkcje są metodami calc obiekt.

Teraz dla funkcji w przykładzie funkcji:

function add (a) return function (b) return a + b; console.log (add (1) (2)); // Wyjście to 3 

Zwrócona funkcja anonimowa jest metodą funkcji Dodaj.

Uwaga: parametr od (za) funkcji Dodaj w powyższym przykładzie dostępna jest następująca funkcja wywołania: ten typ procesu jest wywoływany curry.

Konstruktorzy

Kiedy dodasz Nowy słowo kluczowe przed funkcją i wywołaj ją, staje się konstruktorem, który tworzy instancje. Poniżej znajduje się przykład, w którym konstruktory są używane do tworzenia instancji Owoc i wartości są dodawane do każdego Owocwłaściwości.

function Fruit () var name, family; // Nazwa naukowa i rodzina this.getName = function () return name;; this.setName = function (wartość) name = value; this.getFamily = function () return family;; this.setFamily = funkcja (wartość) rodzina = wartość;  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 " 

Funkcje strzałek (standard ES6) [Tylko w Firefoksie]

Nowa definicja funkcji ze standardu ES6 zapewnia krótszą składnię dla wyrażenia funkcji. Składnia jest

() => / * body * / 

Ta przykładowa funkcja:

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

jest taki sam jak:

var sing = () => console.log („śpiewanie…”); 

Funkcje strzałek są anonimowe i nie mają własnych to wartość, to w środku będzie tak samo jak to w załączającym kodzie. Nie możesz także zmienić go na konstruktora Nowy słowo kluczowe.

Są przydatne, kiedy chcesz to wewnątrz funkcji, która ma być taka sama jak na zewnątrz, a jej krótsza składnia sprawia, że ​​kod do zapisu w funkcji jest zwięzły (jak poniżej)

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

w

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

Funkcje generatora (standard ES6) [Tylko w Firefoksie]

Kolejną nową definicją funkcji ze standardu ES6 jest funkcja generatora. Funkcje generatora są w stanie zatrzymać i kontynuować wykonywanie. Jego składnia to:

funkcja * nazwa_funkcji ()  

lub

funkcja * nazwa_funkcji ()  

Funkcje generatora tworzą iteratory. Iteratory Kolejny metoda jest następnie używana do wykonania kodu wewnątrz funkcji generatora, aż do wydajność słowo kluczowe zostało osiągnięte. Następnie iterowana wartość identyfikowana przez wydajność słowo kluczowe jest zwracane przez funkcję generatora, a wykonanie zostaje zatrzymane.

Funkcja generatora ponownie działa, gdy Kolejny metoda jest wywoływana do następnego wydajność słowo kluczowe zostało osiągnięte. Raz wszystkie wydajność wyrażenia są wykonywane, uzyskana wartość powraca niezdefiniowany.

Poniżej znajduje się prosty przykład:

funkcja * generator_func (liczba) for (var i = 0; i 
Oto kolejny przykład:
 
funkcja * randomIncrement (i) yield i + 3; wydajność i + 5; wydajność i + 10; wydajność i + 6;  var itr = randomIncrement (4); console.log (wartość itr.next ().); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 
Jest też a wydajność* wyrażenie, które przekazuje wartość do innej funkcji generatora
 
funkcja * owoce (owoce) wydaj * warzywa (owoce); wydajność „winogrona”;  funkcja * warzywa (owoce) owoc plon + „i szpinak”; plon owoców + „i brokuły”; plon owoców + „i ogórek”;  var itr = fruits („Apple”); console.log (wartość itr.next ().); // „Apple and Spinach” console.log (wartość itr.next ().); // „Apple and Broccoli” console.log (wartość itr.next ().); // „Apple and Cucumber” console.log (wartość itr.next ().); // „Grapes” console.log (wartość itr.next ().); //niezdefiniowany 
 
Funkcje generatora są przydatne, jeśli chcesz przechodzić przez wartości po kolei w preferowanym punkcie kodu, wstrzymując je, zamiast w jednym przechodzić przez tablicę.
 
Wniosek
 
Poniżej zamieszczam listę odniesień, w której znajdziesz linki do odnośników i artykułów, które osobno dotyczą różnych tematów. Obie standardowe funkcje ES6 będą teraz działać tylko w Firefoksie.
 
Referencje
 
Język ECMAScript: funkcje i klasy
 
Wyrażenie funkcji wywoływane natychmiastowo (IIFE)
 
Podstawy generatorów ES6
 
Funkcje strzałek
 
Funkcjonować - Mozilla Developer Network