Это выражение функции, оно обозначает выражение «немедленно вызванная функция» (IIFE). IIFE - это просто функция, которая выполняется сразу после ее создания. Таким образом, благодаря функции, ожидающей, пока она не будет вызвана, IIFE выполняется немедленно. Давайте построим IIFE на примере. Предположим, у нас есть функция добавления, которая принимает два целых числа в качестве аргументов и возвращает сумму, позволяющую превратить функцию добавления в IIFE,
Шаг 1: Определите функцию
function add (a, b){
return a+b;
}
add(5,5);
Шаг 2: Вызовите функцию, заключив объявление всей функции в круглые скобки.
(function add (a, b){
return a+b;
})
//add(5,5);
Шаг 3: Для немедленного вызова функции просто удалите текст «добавить» из вызова.
(function add (a, b){
return a+b;
})(5,5);
Основная причина использования IFFE состоит в том, чтобы сохранить частную область действия в вашей функции. Внутри вашего JavaScript-кода вы хотите убедиться, что вы не переопределяете ни одну глобальную переменную. Иногда вы можете случайно определить переменную, которая переопределяет глобальную переменную. Давайте попробуем на примере. Предположим, у нас есть HTML-файл с именем iffe.html и коды внутри тега body:
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Итак, приведенный выше код будет выполняться без каких-либо вопросов, теперь предположим, что вы объявили переменную с именем document случайно или намеренно.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
вы в конечном итоге в SyntaxError : документа глобального свойства.
Но если вы хотите объявить переменную имени документа, вы можете сделать это с помощью 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>
Вывод:
Давайте попробуем на другом примере, предположим, у нас есть объект калькулятора, как показано ниже:
<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>
Ну, это работает как шарм, что если мы случайно переназначим значение объекта калькулятора.
<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>
да, вы получите ошибку TypeError: calculator.mul не является функцией iffe.html
Но с помощью IFFE мы можем создать частную область видимости, где мы можем создать еще один калькулятор имен переменных и использовать его;
<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>
Вывод:
