Jest to wyrażenie funkcyjne, oznacza natychmiastowe wywołanie wyrażenia funkcyjnego (IIFE). IIFE to po prostu funkcja wykonywana zaraz po jej utworzeniu. Zatem jeśli funkcja musi poczekać, aż zostanie wywołana do wykonania, IIFE jest wykonywany natychmiast. Stwórzmy IIFE na przykładzie. Załóżmy, że mamy funkcję add, która przyjmuje dwie liczby całkowite jako argumenty i zwraca sumę, co pozwala przekształcić funkcję add w IIFE,
Krok 1: Zdefiniuj funkcję
function add (a, b){
return a+b;
}
add(5,5);
Krok 2: Wywołaj funkcję, zawijając całą deklarację funkcji w nawiasach
(function add (a, b){
return a+b;
})
//add(5,5);
Krok 3: Aby natychmiast wywołać funkcję, wystarczy usunąć tekst „dodaj” z połączenia.
(function add (a, b){
return a+b;
})(5,5);
Głównym powodem korzystania z IFFE jest zachowanie zakresu prywatnego w ramach funkcji. Wewnątrz kodu javascript chcesz się upewnić, że nie zastępujesz żadnej zmiennej globalnej. Czasami możesz przypadkowo zdefiniować zmienną, która zastępuje zmienną globalną. Spróbujmy na przykładzie. Załóżmy, że mamy plik HTML o nazwie iffe.html, a kody wewnątrz tagu body to-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Cóż, powyższy kod zostanie wykonany bez żadnego pytania, teraz załóżmy, że usuniesz zmienną o nazwie dokument przypadkowo lub celowo.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
skończysz w SyntaxError : redeclaration of non-configurable global property document.
Ale jeśli chcesz usunąć dokument z nazwą zmiennej, możesz to zrobić za pomocą IFFE.
<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>
Wynik:
Spróbujmy na innym przykładzie, załóżmy, że mamy obiekt kalkulatora taki jak poniżej
<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>
Cóż, działa jak urok, co jeśli przypadkowo zmienimy wartość obiektu kalkulatora.
<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>
tak, skończy się na TypeError: kalkulator.mul nie jest funkcją iffe.html
Ale za pomocą IFFE możemy stworzyć prywatny zakres, w którym możemy stworzyć inny kalkulator nazwy zmiennej i użyć go;
<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>
Wynik:
