Definieren Sie eine Funktion innerhalb einer anderen Funktion in JavaScript

Question 1

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 ähnelt. Ich möchte abstrahieren Aufgabe 3 in eine Funktion, bar()aber ich möchte den Zugriff auf diese Funktion auf den Geltungsbereich von beschränken foo(a).

Ist es richtig, Folgendes zu ändern, 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 obige richtig ist, tut es bar() werden jedes Mal neu definiert foo(a) wird angerufen? (Ich mache mir hier Sorgen um die Verschwendung von CPU-Ressourcen.)

Question 2

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

bar wird bei jedem Aufruf der Funktion erstellt fooaber:
- Bei modernen Browsern ist dies ein sehr schneller Vorgang. (Einige Engines kompilieren möglicherweise nur die Code dafür einmal verwenden und diesen Code dann jedes Mal mit einem anderen Kontext wiederverwenden; Googles V8-Motor [in Chrome and elsewhere] tut das in den meisten Fällen.)
- Und je nachdem was bar tut, können einige Engines feststellen, dass sie es “inline” können, wodurch der Funktionsaufruf vollständig eliminiert wird. V8 tut dies, und ich bin sicher, dass es nicht der einzige Motor ist, der dies tut. Natürlich können sie dies nur tun, wenn es das Verhalten des Codes nicht ändert.

Die Leistungsauswirkung, falls vorhanden, zu haben bar jedes Mal erstellt wird, variiert stark zwischen den JavaScript-Engines. Wenn bar trivial ist, wird es von nicht nachweisbar bis ziemlich klein variieren. Wenn Sie nicht anrufen foo tausende Male hintereinander (zum Beispiel von a mousemove Handler), würde ich mir keine Sorgen machen. Selbst wenn Sie es sind, würde ich mir nur Sorgen machen, wenn ich ein Problem bei langsameren Motoren sehe. Hier ist ein Testfall mit DOM-Vorgängenwas darauf hindeutet, dass es einen Einfluss gibt, aber einen trivialen (wahrscheinlich durch das DOM-Zeug ausgewaschen). Hier ist ein Testfall, der reine Berechnungen durchführt was eine viel höhere Wirkung zeigt, aber ehrlich gesagt sprechen wir sogar von einem Unterschied MikroSekunden, weil sogar eine 92% ige Steigerung auf etwas, das dauert MikroSekunden passieren, ist immer noch sehr, sehr schnell. Bis/es sei denn, Sie haben eine Auswirkung in der realen Welt gesehen, ist dies kein Grund zur Sorge.
bar ist 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 das, weil Sie eine Funktion verwendet haben Erklärungspielt es keine Rolle, wo Sie die Deklaration platzieren (oben, unten oder in der Mitte – solange sie sich auf der obersten Ebene der Funktion befindet und nicht innerhalb einer Flusssteuerungsanweisung, was ein Syntaxfehler ist), wird sie vor der definiert Die erste Zeile des schrittweisen Codes wird ausgeführt.

Question 3

Dafür gibt es Schließungen.

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 Closure) 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 Closure zu erstellen.

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

Question 4

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 Verschluss behält den Umfang bei bar() enthalten, die Rückgabe der neuen Funktion aus der selbstausführenden anonymen Funktion setzt einen sichtbareren Bereich um foo(). Die anonyme selbstausführende Funktion wird genau einmal ausgeführt, daher gibt es nur eine bar() Instanz und jede Ausführung von foo() werde es verwenden.

Question 5

Ja, das funktioniert gut.

Die innere Funktion wird nicht jedes Mal neu erstellt, wenn Sie die äußere Funktion eingeben, aber sie wird neu zugewiesen.

Wenn Sie diesen Code testen:

function test() {

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

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

}

test();
test();

wird sich zeigen 1, 2, 1, 2nicht 1, 2, 2, 2.

Question 6

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 20-mal schneller ausgeführt wurden als die nicht verschachtelten. (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.