Определите функцию в другой функции в JavaScript

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

У меня есть функция, структура которой аналогична приведенной выше. Я хочу абстрагировать задачу 3 в функцию, bar()но я хочу ограничить доступ этой функции только в рамках foo(a).

Правильно ли переходить к следующему, чтобы достичь того, чего я хочу?

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

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

Если приведенное выше верно, bar()переопределяется ли каждый раз при foo(a)вызове? (Здесь меня беспокоит потеря ресурсов ЦП.)

Да, то, что у вас есть, правильно. Некоторые примечания:

• barсоздается при каждом вызове функции foo, но:
  • В современных браузерах это очень быстрый процесс. (Некоторые движки вполне могут компилировать только код для него только один раз, а затем повторно использовать этот код каждый раз в другом контексте; движок Google V8 [в Chrome и других местах] делает это в большинстве случаев.)
  • И в зависимости от того bar, что происходит, некоторые движки могут определить, что они могут «встроить» его, полностью исключив вызов функции. V8 делает это, и я уверен, что это не единственный двигатель. Естественно, они могут это сделать, только если это не изменит поведение кода.
• Влияние на производительность, если таковое имеется, от barсоздания каждый раз будет широко варьироваться в зависимости от движка JavaScript. Если barэто тривиально, оно будет варьироваться от необнаружимого до довольно маленького. Если вы не звоните fooтысячи раз подряд (например, из mousemoveобработчика), я бы не стал беспокоиться об этом. Даже если да, я бы беспокоился об этом, только если бы увидел проблему с более медленными двигателями. Вот тестовый пример, связанный с операциями DOM , который предполагает, что влияние есть, но тривиально (вероятно, смыто материалом DOM). Вот тестовый пример, выполняющий чистые вычисления, который показывает гораздо большее влияние, но, честно говоря, даже мы говорим о разнице в микросекунды, потому что даже 92% -ное увеличение того, что требует микросекунды - это еще очень и очень быстро. До тех пор, пока вы не увидите столкновения в реальном мире, не о чем беспокоиться.
• barбудет доступен только изнутри функции, и он имеет доступ ко всем переменным и аргументам для этого вызова функции. Это делает этот шаблон очень удобным.
• Обратите внимание, что, поскольку вы использовали объявление функции , не имеет значения, где вы поместите объявление (вверху, внизу или в середине - пока оно находится на верхнем уровне функции, а не внутри оператора управления потоком, который синтаксическая ошибка), он определяется до запуска первой строки пошагового кода.

Вот для чего нужны закрытия.

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 (замыкание) содержит ссылку на bar, и только ссылка на innerfoo возвращается из анонимной функции, которая вызывается только один раз для создания замыкания.

Таким образом, бар недоступен снаружи.

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

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

Замыкание сохраняет область bar()содержания, возвращая новую функцию из самоисполняющейся анонимной функции, устанавливает более видимую область видимости foo(). Анонимная самовыполняющаяся функция запускается ровно один раз, поэтому существует только один bar()экземпляр, и каждое выполнение foo()будет использовать его.

Да, отлично работает.

Внутренняя функция не воссоздается каждый раз, когда вы вводите внешнюю функцию, но она переназначается.

Если вы протестируете этот код:

function test() {

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

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

}

test();
test();

она покажет 1, 2, 1, 2, не 1, 2, 2, 2.

Я создал jsperf для тестирования вложенных и невложенных, а также функциональных выражений и объявлений функций, и я был удивлен, увидев, что вложенные тестовые примеры выполняются в 20 раз быстрее, чем невложенные. (Я ожидал либо противоположных, либо незначительных различий).

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

Это в Chrome 76, macOS.