Es ist ein Funktionsausdruck und steht für sofort aufgerufenen Funktionsausdruck (IIFE). IIFE ist einfach eine Funktion, die direkt nach ihrer Erstellung ausgeführt wird. Nachdem die Funktion warten muss, bis sie zur Ausführung aufgerufen wird, wird IIFE sofort ausgeführt. Lassen Sie uns das IIFE anhand eines Beispiels konstruieren. Angenommen, wir haben eine Add-Funktion, die zwei Ganzzahlen als Argumente verwendet und die Summe zurückgibt. Lassen Sie uns die Add-Funktion in ein IIFE verwandeln.
Schritt 1: Definieren Sie die Funktion
function add (a, b){
return a+b;
}
add(5,5);
Schritt 2: Rufen Sie die Funktion auf, indem Sie die gesamte Funktionsdeklaration in Klammern setzen
(function add (a, b){
return a+b;
})
//add(5,5);
Schritt 3: Um die Funktion sofort aufzurufen, entfernen Sie einfach den 'Hinzufügen'-Text aus dem Aufruf.
(function add (a, b){
return a+b;
})(5,5);
Der Hauptgrund für die Verwendung eines IFFE besteht darin, einen privaten Bereich innerhalb Ihrer Funktion beizubehalten. In Ihrem Javascript-Code möchten Sie sicherstellen, dass Sie keine globale Variable überschreiben. Manchmal definieren Sie versehentlich eine Variable, die eine globale Variable überschreibt. Versuchen wir es mit einem Beispiel. Angenommen, wir haben eine HTML-Datei namens iffe.html und Codes innerhalb des Body-Tags sind:
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Nun, der obige Code wird ohne jede Frage ausgeführt. Nehmen wir nun an, Sie haben versehentlich oder absichtlich eine Variable mit dem Namen document deklariert.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
Sie werden in einem SyntaxError enden : Neudeklaration eines nicht konfigurierbaren globalen Eigenschaftendokuments.
Wenn Sie jedoch einen Variablennamen documet deklarieren möchten, können Sie dies mithilfe von IFFE tun.
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Ausgabe:
Nehmen wir ein anderes Beispiel an. Nehmen wir an, wir haben ein Taschenrechnerobjekt wie unten.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
Nun, es funktioniert wie ein Zauber. Was ist, wenn wir versehentlich den Wert des Taschenrechnerobjekts neu zuweisen?
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
Ja, Sie erhalten einen TypeError: calculator.mul ist keine Funktion iffe.html
Mit Hilfe von IFFE können wir jedoch einen privaten Bereich erstellen, in dem wir einen anderen Variablennamenrechner erstellen und verwenden können.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
Ausgabe:
