1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
title: Підняття
slug: Glossary/Hoisting
tags:
- JavaScript
- Словник
translation_of: Glossary/Hoisting
---
<p>Термін <em>підняття</em> (hoisting) ви не знайдете у жодній нормативній специфікації до <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. Підняття придумали як загальне поняття того, як працюють контексти виконання (зокрема, стадії створення та виконання) у JavaScript. Однак, спочатку ця концепція може дещо заплутати.</p>
<p>Концептуально, наприклад, строге визначення підняття припускає, що оголошення змінних та функцій фізично пересуваються нагору вашого коду, але це не те, що насправді відбувається. Замість цього, оголошення змінних та функцій розміщуються у пам'яті під час стадії <em>компіляції</em>, але залишаються там, де ви написали їх у коді.</p>
<h2 id="Дізнайтесь_більше">Дізнайтесь більше</h2>
<h3 id="Технічний_приклад">Технічний приклад</h3>
<p>Однією з переваг розміщення оголошення функцій у пам'яті до того, як JavaScript виконає будь-який код, є те, що це дозволяє використовувати функцію до того, як ви оголосили її у коді. Наприклад:</p>
<pre class="brush: js">function catName(name) {
console.log("Мого кота звуть " + name);
}
catName("Тигр");
/*
Результат наведеного коду: "Мого кота звуть Тигр"
*/
</pre>
<p>Фрагмент коду, наведений вище, відображає те, як ви очікуєте написати код, щоб він працював. А тепер подивимось, що станеться, якщо ви викличете функцію перед її оголошенням:</p>
<pre class="brush: js">catName("Барсик");
function catName(name) {
console.log("Мого кота звуть " + name);
}
/*
Результат наведеного коду: "Мого кота звуть Барсик"
*/
</pre>
<p>Хоча виклик функції у коді відбувається раніше за оголошення функції, код все одно працює. Причина в тому, як працює контекст виконання у JavaScript.</p>
<p>Підняття добре працює з іншими типами даних та змінними. Змінні можна ініціалізувати та використовувати до того, як вони були оголошені.</p>
<h3 id="Піднімаються_лише_оголошення">Піднімаються лише оголошення</h3>
<p>У JavaScript піднімаються лише оголошення, а не ініціалізації. Якщо змінна була оголошена та ініціалізована після того, як була використана, її значенням буде undefined. Наприклад:</p>
<pre class="brush: js">console.log(num); // Вертає undefined
var num;
num = 6;</pre>
<p>Якщо ви оголошуєт змінну після того, як вона була використана, але ініціалізуєте заздалегідь, буде повернене значення:</p>
<pre class="brush: js">num = 6;
console.log(num); // вертає 6
var num;
</pre>
<p>Нижче більше прикладів, що демонструють підняття.</p>
<pre class="brush: js">//Приклад 1 - Не піднімається
var x = 1; // Ініціалізація x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
//Це не працюватиме, бо у JavaScript <strong>піднімаються лише оголошення</strong>
//Приклад 2 - Піднімається
var num1 = 3; //Оголосити та ініціалізувати num1
num2 = 4; //Ініціалізувати num2
console.log(num1 + " " + num2); //'3 4'
var num2; //Оголосити num2 для підняття
//Приклад 3 - Піднімається
a = 'Журав'; //Ініціалізувати a
b = 'лина'; //Ініціалізувати b
console.log(a + "" + b); // 'Журавлина'
var a, b; //Оголосити a & b для підняття
</pre>
<h3 id="Технічна_довідка">Технічна довідка</h3>
<ul>
<li><a href="/uk/docs/Web/JavaScript/Reference/Statements/var">оператор var</a> — MDN</li>
<li><a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оператор function</a> — MDN</li>
</ul>
|
