Визначте функцію в межах іншої функції в 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 (закриття) містить посилання на бар, і лише посилання на 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.