Сегодняшний короткий совет по видео приведен в ответ на вопрос в Твиттере о «подъеме JavaScript». Что это? Как это работает? Что вам нужно знать об этом? Все это будет рассмотрено на этом уроке, посвященном основам для начинающих.
Полный скринкаст
Подъем объяснил
Рассмотрим следующий код:
1
2
|
var myvar = ‘my value’;
alert(myvar);
|
Хорошо, конечно, предупреждение будет отображать «моя ценность». Это очевидно; однако, придерживайся меня. Давайте теперь создадим немедленную функцию, которая предупреждает то же значение.
1
2
3
4
5
|
var myvar = ‘my value’;
(function() {
alert(myvar);
})();
|
Хорошо, хорошо. Все еще очевидно, я знаю. Теперь давайте добавим гаечный ключ в микс и создадим локальную переменную внутри этой анонимной функции с тем же именем.
1
2
3
4
5
6
|
var myvar = ‘my value’;
(function() {
alert(myvar);
var myvar = ‘local value’;
})();
|
А? Почему предупреждение теперь отображается undefined
? Несмотря на то, что мы объявили новую переменную, она все еще находится ниже уровня предупреждения; так что это не должно иметь эффекта, верно? Неправильно
Объявления переменных поднимаются
В пределах текущей области видимости, независимо от того, где объявлена переменная, она будет скрытно подниматься наверх. Однако будет поднята только declaration
. Если переменная также initialized
, текущее значение в верхней части области будет изначально установлено как undefined
.
Хорошо, давайте расшифруем разницу между терминами, declaration
и initialization
. Предположим следующую строку: var joe = 'plumber';
декларация
1
|
var joe;
|
инициализация
1
|
joe = ‘plumber’;
|
Теперь, когда мы понимаем терминологию, мы можем легче понять, что происходит под капотом. Рассмотрим следующую фиктивную функцию.
1
2
3
4
5
6
7
8
|
(function() {
var a = ‘a’;
// lines of code
var b = ‘b’;
// more lines of code
var c= ‘c’;
// final lines of scripting
})();
|
Объявите все переменные вверху.
Обратите внимание, что то, что приведено в качестве примера выше, считается плохой практикой. Тем не менее, за кулисами все эти объявления переменных — независимо от того, где они находятся в области действия функции — будут подняты вверх, например:
1
2
3
4
5
6
7
8
9
|
(function() {
var a, b, c;
a = ‘a’;
// lines of code
b = ‘b’;
// more lines of code
c= ‘c’;
// final lines of scripting
})();
|
Ага момент
Если мы сейчас вернемся к первоначальному запутанному undefined
куску кода, сверху:
1
2
3
4
5
6
|
var myvar = ‘my value’;
(function() {
alert(myvar);
var myvar = ‘local value’;
})();
|
Теперь должно быть myvar
почему myvar
предупреждает undefined.
Как мы узнали, как только была объявлена локальная переменная myvar
, она автоматически поднялась в верхнюю часть области действия функции… над предупреждением. В результате переменная уже была объявлена во время предупреждения; однако, поскольку инициализация также не выполняется, значение переменной равно: undefined
.