Skip to content

Commit 208e73f

Browse files
authored
Добавлено описание IIFE
1 parent 0b31687 commit 208e73f

File tree

1 file changed

+74
-0
lines changed

1 file changed

+74
-0
lines changed

1-js/06-advanced-functions/04-var/article.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11

22
# Устаревшее ключевое слово "var"
33

4+
```smart header="Эта статья предназначена для понимания старых скриптов"
5+
Информация, приведенная в этой статье, полезна для понимания старых скриптов.
6+
7+
Мы не пишем современный код таким образом.
8+
```
9+
410
В самой первой главе про [переменные](info:variables) мы ознакомились с тремя способами объявления переменных:
511

612
1. `let`
@@ -217,6 +223,74 @@ sayHi();
217223

218224
В обоих примерах выше вызов `alert` происходил без ошибки, потому что переменная `phrase` уже существовала. Но её значение ещё не было присвоено, поэтому мы получали `undefined`.
219225

226+
## IIFE
227+
228+
В прошлом, поскольку существовал только `var`, а он не имел блочной области видимости, программисты придумали способ её эмулировать. Этот способ получил название "Immediately-invoked function expressions" (сокращенно IIFE).
229+
230+
Это не то, что мы должны использовать сегодня, но, так как вы можете встретить это в старых скриптах, полезно понимать принцип работы.
231+
232+
IIFE выглядит следующим образом:
233+
234+
```js run
235+
(function() {
236+
237+
var message = "Hello";
238+
239+
alert(message); // Hello
240+
241+
})();
242+
```
243+
244+
Здесь создаётся и немедленно вызывается Function Expression. Так что код выполняется сразу же и у него есть свои локальные переменные.
245+
246+
Function Expression обёрнуто в скобки `(function {...})`, потому что, когда JavaScript встречает `"function"` в основном потоке кода, он воспринимает это как начало Function Declaration. Но у Function Declaration должно быть имя, так что такой код вызовет ошибку:
247+
248+
```js run
249+
// Пробуем объявить и сразу же вызвать функцию
250+
function() { // <-- SyntaxError: Function statements require a function name
251+
252+
var message = "Hello";
253+
254+
alert(message); // Hello
255+
256+
}();
257+
```
258+
259+
Даже если мы скажем: "хорошо, давайте добавим имя", -- это не сработает, потому что JavaScript не позволяет вызывать Function Declaration немедленно.
260+
261+
```js run
262+
// ошибка синтаксиса из-за скобок ниже
263+
function go() {
264+
265+
}(); // <-- нельзя вызывать Function Declaration немедленно
266+
```
267+
268+
Так что скобки вокруг функции -- это трюк, который позволяет объяснить JavaScript, что функция была создана в контексте другого выражения, а значит, что это Function Expression: ей не нужно имя и её можно вызвать немедленно.
269+
270+
Помимо круглых скобок существуют и другие способы сообщить JavaScript, что мы имеем в виду Function Expression:
271+
272+
```js run
273+
// Способы создания IIFE
274+
275+
*!*(*/!*function() {
276+
alert("Круглые скобки вокруг функции");
277+
}*!*)*/!*();
278+
279+
*!*(*/!*function() {
280+
alert("Круглые скобки вокруг всего выражения");
281+
}()*!*)*/!*;
282+
283+
*!*!*/!*function() {
284+
alert("Выражение начинается с логического оператора НЕ");
285+
}();
286+
287+
*!*+*/!*function() {
288+
alert("Выражение начинается с унарного плюса");
289+
}();
290+
```
291+
292+
Во всех перечисленных случаях мы объявляем Function Expression и немедленно запускаем его. Ещё раз отметим: в настоящее время необходимости писать подобный код нет.
293+
220294
## Итого
221295

222296
Существует 2 основных отличия `var` от `let/const`:

0 commit comments

Comments
 (0)