Zdefiniuj funkcję w innej funkcji w JavaScript

function foo(a) {
    if (/* Some condition */) {
        // perform task 1
        // perform task 3
    }
    else {
        // perform task 2
        // perform task 3
    }
}

Mam funkcję, której struktura jest podobna do powyższej. Chcę wyodrębnić zadanie 3 do funkcji, bar()ale chcę ograniczyć dostęp do tej funkcji tylko do zakresu foo(a).

Aby osiągnąć to, czego chcę, czy słuszne jest przejście na następujące?

function foo(a) {
    function bar() {
        // Perform task 3
    }

    if (/* Some condition */) {
        // Perform task 1
        bar();
    }
    else {
        // Perform task 2
        bar();
    }
}

Jeśli powyższe jest poprawne, czy za bar()każdym foo(a)wywołaniem jest zmieniane? (Martwię się tutaj o marnowanie zasobów procesora).

Tak, to, co tam masz, jest właściwe. Kilka uwag:

• barjest tworzony przy każdym wywołaniu funkcji foo, ale:
  • W nowoczesnych przeglądarkach jest to bardzo szybki proces. (Niektóre silniki mogą kompilować tylko kod tylko raz, a następnie za każdym razem ponownie używać tego kodu w innym kontekście; silnik V8 firmy Google [w Chrome i nie tylko] robi to w większości przypadków).
  • W zależności od tego bar, co się dzieje, niektóre silniki mogą określić, że mogą to „wbudować”, całkowicie eliminując wywołanie funkcji. V8 to robi i jestem pewien, że to nie jedyny silnik, który to robi. Oczywiście mogą to zrobić tylko wtedy, gdy nie zmienia to zachowania kodu.
• Wpływ na wydajność bartworzenia za każdym razem będzie się znacznie różnić w zależności od silnika JavaScript. Jeśli barjest trywialny, będzie się różnić od niewykrywalnego do dość małego. Jeśli nie dzwonisz footysiące razy z rzędu (na przykład od mousemoveobsługi), nie martwiłbym się tym. Nawet jeśli tak, martwiłbym się tylko, gdybym zobaczył problem z wolniejszymi silnikami. Oto przypadek testowy obejmujący operacje DOM , który sugeruje, że jest wpływ, ale trywialny (prawdopodobnie wyparty przez rzeczy DOM). Oto przypadek testowy wykonujący czyste obliczenia, które pokazują znacznie większy wpływ, ale szczerze mówiąc nawet, mówimy o różnicy mikro sekund, ponieważ nawet 92% wzrost w przypadku czegoś, co wymaga mikrosekundy, które mają nastąpić, są nadal bardzo, bardzo szybkie. Dopóki nie zobaczysz rzeczywistego wpływu, nie ma się czym martwić.
• barbędzie dostępny tylko z poziomu funkcji i będzie miał dostęp do wszystkich zmiennych i argumentów dla tego wywołania funkcji. To sprawia, że ​​jest to bardzo poręczny wzór.
• Zwróć uwagę, że ponieważ użyłeś deklaracji funkcji , nie ma znaczenia, gdzie umieścisz deklarację (na górze, na dole lub na środku - o ile znajduje się na najwyższym poziomie funkcji, a nie wewnątrz instrukcji sterującej przepływem), która jest błąd składni), zostaje zdefiniowany przed uruchomieniem pierwszej linii kodu krokowego.

Po to są zamknięcia.

var foo = (function () {
  function bar() {
    // perform task 3
  };

  function innerfoo (a) { 
    if (/* some cond */ ) {
      // perform task 1
      bar();
    }
    else {
      // perform task 2
      bar();
    }
  }
  return innerfoo;
})();

Innerfoo (zamknięcie) przechowuje odniesienie do baru, a anonimowa funkcja, która jest wywoływana tylko raz, aby utworzyć zamknięcie, zwraca tylko odwołanie do innerfoo.

W ten sposób bar nie jest dostępny z zewnątrz.

var foo = (function () {
    var bar = function () {
        // perform task 3
    }
    return function (a) {

        if (/*some condition*/) {
            // perform task 1
            bar();
        }
        else {
            // perform task 2
            bar();
        }
    };
}());

Zamknięcie zachowuje zakres bar()zawarty, zwracając nową funkcję z samowykonującej się funkcji anonimowej ustawia bardziej widoczny zakres na foo(). Anonimowa funkcja samowykonująca się jest uruchamiana dokładnie raz, więc jest tylko jedna bar()instancja i każde wykonanie foo()będzie jej używać.

Tak, to działa dobrze.

Funkcja wewnętrzna nie jest odtwarzana za każdym razem, gdy wchodzisz do funkcji zewnętrznej, ale jest ponownie przypisywana.

Jeśli przetestujesz ten kod:

function test() {

    function demo() { alert('1'); }

    demo();
    demo = function() { alert('2'); };
    demo();

}

test();
test();

pokaże 1, 2, 1, 2, nie 1, 2, 2, 2.

Utworzyłem jsperf, aby przetestować zagnieżdżone i niezagnieżdżone wyrażenia funkcyjne i deklaracje funkcji i byłem zaskoczony, widząc, że zagnieżdżone przypadki testowe działały 20 razy szybciej niż niezagnieżdżone. (Spodziewałem się albo przeciwnych, albo nieistotnych różnic).

https://jsperf.com/nested-functions-vs-not-nested-2/1

To jest w Chrome 76, macOS.