Ausführliche Erläuterung anonymer, benannter JavaScript-Funktionen und sofortiger Ausführungsfunktionen IIFE

Der Funktionsumfang in JavaScript dient zum „Ausblenden“ von Variablen und Funktionen

Entspricht unserem Prinzip der geringsten Rechte
Gleichzeitig besteht ein weiterer Vorteil darin, dass Bezeichner mit dem vermieden werden können Gleicher Namenskonflikt von Symbolen
Heute werden wir hauptsächlich über diese Funktion zur sofortigen Ausführung sprechen
Zuvor überprüfen wir anonyme Funktionen und benannte Funktionen

Anonyme Funktionen und benannte Funktionen

Ob es so ist anonym oder Benennung ist alles für Funktionsausdrücke
Die Funktionsdeklaration muss einen Namen haben, sonst wird ein Fehler gemeldet

function foo(){ //函数声明
    //...}

Hier erkläre ich ein Easter Egg, vielleicht kannst du es lesen Beim Schreiben von Artikeln verwende ich immer gerne Beispielcode
Wörter wie fn, func, demo, foo, bar, foobar
fn und func sind die Abkürzungen für Funktion „function“
Demo ist die Abkürzung des Wortes Demonstration „Beispiel“
foo, bar, foobar können wir oft in Fachbüchern und Computerliteratur sehen
foo ist eine Variante von fu, der Abkürzung für „fuck-up“, was „ein Durcheinander“ bedeutet
bar ist „unerkennbar“, was „unerkennbar“ bedeutet Sie sind nur einige Platzhalter, äquivalent zu unserem Xiao Ming Xiao Hong, A, B, B, D, Zhang San, Li Si...

Funktionsausdrücke können Namen oder keine Namen haben

var foo = function(){...};
console.log(foo.name); //foo
var bar = function foobar(){...};//不要这么写
console.log(bar.name); //foobar

Es ist ersichtlich, dass die zweite Schreibweise einfach das Namensattribut der Funktion ändert

Es ist ansonsten nutzlos, wir sollten es nicht so schreiben

Sonst unser Bestes Häufig wird ein Funktionsausdruck als Rückrufparameter verwendet

Zum Beispiel in einem Timer

setTimeout(function(){
    //...},1000);

Hier habe ich einen anonymen Funktionsausdruck geschrieben

Es ist einfach und grob zu verwenden
aber es weist mehrere Mängel auf

• Es gibt keinen Funktionsnamen im Trace-Stack, was das Debuggen erschwert

• Wenn Sie auf sich selbst verweisen müssen, können Sie dies tun Nur arguments.callee verwenden (im strengen ES5-Modus deaktiviert)

• Lesbarkeit und Verständlichkeit der Funktion verringert

Wenn wir die Bindung des Ereignisses aufheben, Wir benötigen auch den Funktionsnamen (wenn Onclick usw. nicht verwendet wird. Direkte Bindung)

Also
einem Funktionsausdruck einen Namen zu geben ist eine bewährte Vorgehensweise und eine gute Angewohnheit

setTimeout(function timerHandler(){
    //...},1000);

Allgemeine Verwendung Funktionen sofort ausführen

Sofortige Funktion ausführen, ich bin es gewohnt, sie so zu nennen

Sie wird auch selbstausführende Funktion, automatische Ausführungsfunktion usw. genannt.
Es ist eher Standard
Ausführen Funktionsausdruck sofort
Achten Sie auf meinen Wortlaut, es ist ein Funktionsausdruck

Es ist keine Syntax

aber jeder hat es verwendet und festgestellt, dass es auf diese Weise verwendet werden kann
So verbreitete es sich , bis jetzt
Wie der Name schon sagt, läuft der Ausführungsfluss zu dieser Funktion und wird sofort ausgeführt. Die
-Community hat Begriffe dafür definiert:
IIFE (Immediately Invoked Function Expression)

Unsere übliche Verwendung ist:

(function(){
    //...}());

(function(){
    //...})();

Wir verwenden Wenn IIFE verwendet wird, wird im Allgemeinen ein anonymer Funktionsausdruck verwendet

Natürlich ist es auch gut, einen Namen hinzuzufügen hat auch die Vorteile eines benannten Funktionsausdrucks
Die beiden Verwendungen sind völlig gleichwertig und es liegt an Ihnen, zu entscheiden, welche Sie verwenden
Aber ich schreibe die Klammern lieber außen, es fühlt sich angenehmer an, sie anzusehen
Und ich habe gesehen, dass viele Meister wie ich sind

Erweiterte Verwendung der Funktion zur sofortigen Ausführung

Etwas fortgeschrittene Verwendung besteht darin, Parameter in der Funktion zur sofortigen Ausführung zu übergeben

Zum Beispiel wir häufig am Fenster vorbei

var a = '全局';
(function IIFE(global){    var a = '局部';    console.log(a);// "局部"
    console.log(global.a);// "全局"})(window);

Welche Vorteile hat das Passieren am Fenster?

Analyse aus der Perspektive unseres Bereichs
(Sie können einen Blick auf den von mir geschriebenen Bereich werfen -> Portal)
Die Referenz des globalen Objekts wird in der lokalen Umgebung zwischengespeichert
Damit wir es können Schnellerer Zugriff Bei globalen Objekten ist es nicht erforderlich, zum Suchen in den Bereich der obersten Ebene zu springen
Diese kleine Optimierung ist nicht der entscheidende Punkt
Der entscheidende Punkt kann beim Komprimieren des Codes optimiert werden
Vielleicht das Das obige Codekomprimierungstool kann ihn wie folgt komprimieren

var a = '全局';
(function IIFE(g){    var a = '局部';    console.log(a);// "局部"
    console.log(g.a);// "全局"})(window);

Wenn der Code sehr groß ist, unterschätzen Sie diese Optimierung nicht

Führen Sie die Funktionsänderungsverwendung sofort aus

IIFE Es gibt eine andere Variante, Sie müssen sie gesehen haben

(function IIFE(demo){
    demo(window);})(function demo(global){
    //...
});

Diese Art, die auszuführende Funktion in Parameter einzufügen, erscheint umständlich

ist aber weit verbreitet Die Gesamtarchitektur von Frameworks wie jQuery ist es auch sehr ähnlich
Wenn Sie daran gewöhnt sind, werden Sie das Gefühl haben, dass es leichter zu verstehen ist als unsere traditionelle Verwendungsmethode

Der Gesamtfunktionsausdruck wird im zweiten Teil von IIFE definiert und an ihn übergeben der erste Teil von IIFE als Parameter

Dann wird die Funktion aufgerufen und das Fenster als Parameter übergeben. Geben Sie ein

Verstehen der Funktion zur sofortigen Ausführung

Warum kann die Funktion zur sofortigen Ausführung automatisch ausgeführt werden? ?

(function(){
    //...})();

Warum

nicht so geschrieben werden kann function(){}() Weil es sich um eine Funktionsdeklaration handelt und Funktionsdeklarationen nicht ausgeführt werden können

Nur ​​Ausdrücke können ausgeführt werden

var demo = function(){
    console.log(1);// 1
    return 123;
}();
console.log(demo);// 123

Dies ist ein Ausdruck, daher kann er ausgeführt werden

Was die Demo erhält, ist der Rückgabewert der Funktion
Da der Ausdruck ausgeführt werden kann, können die folgenden Methoden sofort ausgeführt werden

+function(){
    console.log(1);// 1}();
-function(){
    console.log(2);// 2}();
!function(){
    console.log(3);// 3}()
,function(){
    console.log(4);// 4}();

Sie können sehen, dass sogar Kommas in Funktionsausdrücke umgewandelt und dann sofort ausgeführt werden können

Aber wir dürfen nicht so schreiben
Wenn die Funktion einen Rückgabewert hat, können unerwartete Konsequenzen auftreten Seite Auswirkungen
und schlechte Lesbarkeit

Zusammenfassung

• Funktionsdeklarationen müssen Namen haben

• Benannte Funktionsausdrücke sind eine Best Practice

• Sofortige Ausführung der Verwendung von Funktionsausdrücken: (function(){}()); (function(){})();

• Führen Sie die Funktion sofort aus, indem Sie Fensterparameter übergeben, um die Fenstergeschwindigkeit in der Bereichskette zu optimieren, was sich positiv auf die Komprimierung des Codes auswirkt.

• Es können nur Ausdrücke ausgeführt werden

Das Obige ist die detaillierte Erklärung der anonymen, benannten JavaScript-Funktionen und der sofortigen Ausführungsfunktionen IIFE. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!