Definieren Sie eine Funktion innerhalb einer anderen Funktion in JavaScript

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

Ich habe eine Funktion, deren Struktur der obigen ähnlich ist. Ich möchte Aufgabe 3 in eine Funktion abstrahieren bar(), aber ich möchte den Zugriff auf diese Funktion nur im Rahmen von beschränken foo(a).

Ist es richtig, auf das Folgende zu wechseln, um das zu erreichen, was ich will?

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

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

Wenn das oben Gesagte korrekt ist, wird bar()es jedes Mal neu definiert, wenn es foo(a)aufgerufen wird? (Ich mache mir hier Sorgen um die Verschwendung von CPU-Ressourcen.)

Ja, was du da hast, ist richtig. Einige Notizen:

• barwird bei jedem Aufruf der Funktion erstellt foo, aber:
  • In modernen Browsern ist dies ein sehr schneller Prozess. (Einige Engines kompilieren den Code möglicherweise nur einmal und verwenden diesen Code dann jedes Mal in einem anderen Kontext. Die V8-Engine von Google [in Chrome und anderswo] erledigt dies in den meisten Fällen.)
  • Und je nachdem, was barfunktioniert, können einige Engines feststellen, dass sie es "inline" können, wodurch der Funktionsaufruf vollständig entfällt. V8 macht das und ich bin sicher, dass es nicht der einzige Motor ist, der das macht. Natürlich können sie dies nur tun, wenn dies das Verhalten des Codes nicht ändert.
• Die Auswirkungen auf die Leistung, bardie jedes Mal erstellt wurden, variieren stark zwischen den JavaScript-Engines. Wenn bares trivial ist, variiert es von nicht nachweisbar bis ziemlich klein. Wenn Sie nicht footausende Male hintereinander anrufen (z. B. von einem mousemoveHandler), würde ich mir darüber keine Sorgen machen. Selbst wenn Sie es sind, würde ich mir nur Sorgen machen, wenn ich ein Problem bei langsameren Motoren sehen würde. Hier ist ein Testfall mit DOM-Operationen , der darauf hindeutet, dass es eine Auswirkung gibt, aber eine triviale (wahrscheinlich vom DOM-Material verwaschen). Hier ist ein Testfall, der eine reine Berechnung durchführt, die eine viel höhere Auswirkung zeigt, aber ehrlich gesagt sprechen wir von einem Unterschied von Mikrosekunden, weil sogar ein Anstieg von 92% auf etwas, das Mikro benötigtSekunden sind immer noch sehr, sehr schnell. Bis / bis Sie einen realen Einfluss gesehen haben, ist es kein Grund zur Sorge.
• barist nur innerhalb der Funktion zugänglich und hat Zugriff auf alle Variablen und Argumente für diesen Aufruf der Funktion. Dies macht dies zu einem sehr praktischen Muster.
• Beachten Sie, dass , weil Sie eine Funktion benutzt habe Erklärung , es spielt keine Rolle , wo Sie die Erklärung setzen (oben, unten oder in der Mitte - so lange , wie es auf der obersten Ebene der Funktion ist, nicht in einer Strömungssteueranweisung, die ist , ein Syntaxfehler), der definiert wird, bevor die erste Zeile des schrittweisen Codes ausgeführt wird.

Dafür sind Verschlüsse da.

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 (ein Verschluss) enthält einen Verweis auf bar und nur ein Verweis auf innerfoo wird von einer anonymen Funktion zurückgegeben, die nur einmal aufgerufen wird, um den Verschluss zu erstellen.

Die Bar ist auf diese Weise von außen nicht zugänglich.

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

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

Der Abschluss behält den Umfang des bar()enthaltenen Bereichs bei und gibt die neue Funktion von den selbstausführenden anonymen Funktionssätzen zurück, auf die ein sichtbarerer Bereich gesetzt ist foo(). Die anonyme selbstausführende Funktion wird genau einmal ausgeführt, es gibt also nur eine bar()Instanz, und jede Ausführung von foo()wird sie verwenden.

Ja, das funktioniert gut.

Die innere Funktion wird nicht jedes Mal neu erstellt, wenn Sie die äußere Funktion aufrufen, sondern neu zugewiesen.

Wenn Sie diesen Code testen:

function test() {

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

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

}

test();
test();

es wird zeigen 1, 2, 1, 2, nicht 1, 2, 2, 2.

Ich habe ein jsperf erstellt, um verschachtelte vs. nicht verschachtelte und Funktionsausdrücke vs. Funktionsdeklarationen zu testen, und ich war überrascht zu sehen, dass die verschachtelten Testfälle 20x schneller als nicht verschachtelte ausgeführt wurden. (Ich habe entweder das Gegenteil oder vernachlässigbare Unterschiede erwartet).

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

Dies ist auf Chrome 76, macOS.