Vertieftes Verständnis der Funktion zur sofortigen Ausführung (function(){…})()_Grundkenntnisse in JavaScript

Javascript ist lockerer als andere Programmiersprachen, daher ist der JavaScript-Code voller seltsamer Schreibmethoden, die manchmal wie Rauch und Spiegel erscheinen können. Natürlich ist es auch wichtig, alle Arten von Schreibmethoden verstehen zu können tieferes Verständnis der Eigenschaften der JavaScript-Sprache.

( function(){…} )() und ( function (){…} () ) sind zwei gängige Methoden zum Schreiben von JavaScript-Funktionen zur sofortigen Ausführung. Zuerst dachte ich, es sei eine anonyme Funktion in Klammern. und dann hinzugefügt Die Klammern rufen die Funktion auf und erfüllen schließlich den Zweck, die Funktion sofort nach ihrer Definition auszuführen. Später wurde festgestellt, dass der Grund für das Hinzufügen der Klammern nicht derselbe war. Um die unmittelbare Ausführung von Funktionen zu verstehen, müssen Sie zunächst einige grundlegende Funktionskonzepte verstehen.

Funktionsdeklaration, Funktionsausdruck, anonyme Funktion

Funktionsdeklaration: function fnName () {…}; Verwenden Sie das Schlüsselwort function, um eine Funktion zu deklarieren, und geben Sie dann einen Funktionsnamen an, der als Funktionsdeklaration bezeichnet wird.

Funktionsausdruck var fnName = function () {…}; Verwenden Sie das Funktionsschlüsselwort, aber geben Sie der Funktion keinen Namen. Schließlich wird die anonyme Funktion einer Variablen zugewiesen, die als Funktionsausdruck bezeichnet wird ist die häufigste grammatikalische Form.

Anonyme Funktion: function () {}; Verwenden Sie das Schlüsselwort function, um eine Funktion zu deklarieren, aber geben Sie der Funktion keinen Namen, daher werden anonyme Funktionen als Funktionsausdrücke bezeichnet Bei der Zuweisung zu einer Variablen wird eine Funktion erstellt, die Zuweisung eines Ereignisses wird zu einem Ereignishandler oder es wird ein Abschluss erstellt usw.

Der Unterschied zwischen Funktionsdeklaration und Funktionsausdruck besteht darin, dass 1. Wenn die Javascript-Engine den Javascript-Code analysiert, die Funktionsdeklaration die Funktionsdeklaration in die aktuelle Ausführungsumgebung (Bereich) hebt, während der Funktionsausdruck Sie müssen warten bis die Javascirtp-Engine die Zeile erreicht, in der sie ausgeführt wird, bevor sie den Funktionsausdruck Zeile für Zeile von oben nach unten analysiert. 2. Sie können nach dem Funktionsausdruck Klammern hinzufügen, um die Funktion sofort aufzurufen fnName()-Formularaufruf. Hier sind zwei Beispiele für den Unterschied.

Code kopieren Der Code lautet wie folgt:

fnName();
function fnName (){
 …
}
//Normalerweise, da die Funktionsdeklaration „heraufgestuft“ wird, kann der Funktionsaufruf vor der Funktionsdeklaration erfolgen

fnName();
var fnName=function( ){
 …
}
//Fehler, die Variable fnName hat keinen Verweis auf die Funktion gespeichert, der Funktionsaufruf muss nach dem Funktionsausdruck

Code kopieren Der Code lautet wie folgt:

var fnName=function(){
warning( 'Hello World');
}();
//Fügen Sie nach dem Funktionsausdruck Klammern hinzu. Wenn die Javascript-Engine dies analysiert, kann die Funktion sofort aufgerufen werden
function fnName(){
Alert( 'Hello World');
}();
//Es wird kein Fehler gemeldet, aber die Javascript-Engine analysiert nur die Funktionsdeklaration und ignoriert die folgenden Klammern. Die Funktionsdeklaration wird nicht aufgerufen
function(){
console.log('Hello World');
}();
//Syntaxfehler, obwohl die anonyme Funktion ein Funktionsausdruck ist, wird keine Zuweisungsoperation ausgeführt,
//So startet die Javascript-Engine. Das Funktionsschlüsselwort wird als Funktionsdeklaration verwendet und ein Fehler wird gemeldet: Ein Funktionsname ist erforderlich

Nachdem ich einige Grundkonzepte von Funktionen verstanden hatte, blickte ich noch einmal auf die beiden Möglichkeiten, Funktionen zu schreiben, die Funktionen sofort ausführen (function(){…})() und (function (){…} ()). Ich dachte, sie wären dasselbe. Setzen Sie eine anonyme Funktion in Klammern und fügen Sie danach eine Klammer hinzu, um die Funktion sofort aufzurufen. Ich wusste damals nicht, warum die Klammern hinzugefügt wurden, aber später wurde mir klar, dass Sie Klammern hinzufügen möchten Nach dem Funktionskörper muss die Funktion ein Funktionsausdruck und keine Funktionsdeklaration sein, um sie sofort aufzurufen.

Code kopieren Der Code lautet wie folgt:

(function(a){
console.log (a); //Firebug-Ausgabe 123, use ()-Operator
})(123);

(function(a){
console.log(a); // Firebug-Ausgabe 1234, use () Operator
}(1234));

!function(a){
console.log(a); //Firebug-Ausgabe 12345, use! Operator
}(12345);

function(a){
console.log(a); //Firebug-Ausgabe 123456, benutze Operator
}(123456);

-function(a){
console.log(a); //firebug-Ausgabe 1234567, use - Operator
}(1234567);

var fn=function(a ){
console.log(a); //Firebug-Ausgabe 12345678, use = Operator
}(12345678)

Um die Ausgabe zu sehen, fügen Sie sie vor der Funktion ein! , , - oder sogar Kommas können dazu führen, dass die Funktion unmittelbar nach ihrer Definition ausgeführt wird, während (),! Operatoren wie , , - und = wandeln alle Funktionsdeklarationen in Funktionsausdrücke um, wodurch die Mehrdeutigkeit zwischen der JavaScript-Engine bei der Identifizierung von Funktionsausdrücken und Funktionsdeklarationen beseitigt wird und die JavaScript-Engine darüber informiert wird, dass es sich um einen Funktionsausdruck und nicht um eine Funktionsdeklaration handelt später verwendet werden. Fügen Sie Klammern hinzu und führen Sie den Code der Funktion sofort aus.

Das Hinzufügen von Klammern ist die sicherste Vorgehensweise, denn! Operatoren wie , , - führen auch Operationen mit dem Rückgabewert der Funktion aus, was manchmal unnötige Probleme verursacht.

Aber was nützt es, so zu schreiben?

Es gibt kein Konzept des privaten Bereichs in JavaScript. Wenn Sie einige Variablen im globalen oder lokalen Bereich eines von mehreren Personen entwickelten Projekts deklarieren, können diese von anderen Personen versehentlich überschrieben werden, indem sie Variablen mit demselben Namen verwenden Aufgrund der Merkmale der JavaScript-Funktionsbereichskette kann diese Technologie verwendet werden, um einen privaten Bereich zu imitieren und anonyme Funktionen als „Container“ zu verwenden. Auf externe Variablen kann innerhalb des „Containers“ zugegriffen werden, die externe Umgebung kann jedoch nicht auf die Variablen innerhalb des „Containers“ zugreifen „. Variablen, sodass die in (function(){…})()() definierten Variablen nicht mit externen Variablen in Konflikt geraten, die allgemein als „anonymer Wrapper“ oder „Namespace“ bekannt sind.

JQuery verwendet diese Methode. Wickeln Sie den JQuery-Code in (function (window, undefined){...jquery code...} (window) ein. Wenn Sie den JQuery-Code im globalen Bereich aufrufen, können Sie interne JQuery-Variablen schützen .

Dieser Artikel ist eine Zusammenstellung persönlicher Erkenntnisse. Wenn es Fehler gibt, weisen Sie bitte darauf hin. Auf die Ansichten im Artikel wird verwiesen:

„Javascript Authoritative Guide“, „Javascript Advanced Programming“