Демистификация JavaScript переменной области и подъем

 var test = "I'm global"; function testScope() { test = "I'm local"; console.log(test); } console.log(test); // output: I'm global testScope(); // output: I'm local console.log(test); // output: I'm local (the global variable is reassigned) 

Попробуйте пример в JS Bin

На этот раз test локальной переменной перезаписывает глобальную переменную с тем же именем. Когда мы запускаем код внутри функции testScope() глобальная переменная переназначается. Если локальная переменная назначается без предварительного объявления с ключевым словом var , она становится глобальной переменной. Чтобы избежать такого нежелательного поведения, вы всегда должны объявлять свои локальные переменные перед их использованием. Любая переменная, объявленная с ключевым словом var внутри функции, является локальной переменной. Рекомендуется объявлять ваши переменные.

Примечание. В строгом режиме это ошибка, если вы назначаете значение переменной без предварительного объявления переменной.

Подъемно

Интерпретатор JavaScript выполняет множество вещей за сценой, и одна из них называется подъемом. Если вы не знаете об этом «скрытом» поведении, это может привести к путанице. Лучший способ думать о поведении переменных JavaScript — это всегда визуализировать их как состоящие из двух частей: объявления и присваивания:

 var state; // variable declaration state = "ready"; // variable definition (assignment) var state = "ready"; // declaration plus definition 

В приведенном выше коде мы сначала объявляем state переменной, а затем присваиваем ей значение «готово». И в последней строке кода мы видим, что эти два шага можно объединить. Но вам нужно иметь в виду, что, хотя на практике они кажутся одним оператором, движок JavaScript рассматривает этот отдельный оператор как два отдельных оператора, как в первых двух строках примера.

Мы уже знаем, что любая переменная, объявленная в области видимости, принадлежит этой области. Но что мы еще не знаем, так это то, что независимо от того, где переменные объявлены в определенной области, все объявления переменных перемещаются в верхнюю часть их области (глобальную или локальную). Это называется подъемом , так как объявления переменных поднимаются в верхнюю часть области видимости. Обратите внимание, что подъем только перемещает объявление. Любые задания остаются на месте. Давайте посмотрим на пример:

 console.log(state); // output: undefined var state = "ready"; 

Попробуйте пример в JS Bin

Как вы можете видеть, когда мы записываем значение state , вывод не undefined , потому что мы ссылаемся на него перед фактическим назначением. Возможно, вы ожидали, что будет сгенерировано ReferenceError, потому что state еще не объявлено. Но чего вы не знаете, так это того, что переменная объявлена ​​за сценой. Вот как код интерпретируется движком JavaScript:

 var state; // moved to the top console.log(state); state = "ready"; // left in place 

Подъем также влияет на объявления функций. Но прежде чем мы увидим несколько примеров, давайте сначала узнаем разницу между объявлением функции и выражением функции.

 function showState() {} // function declaration var showState = function() {}; // function expression 

Самый простой способ отличить объявление функции от выражения функции — это проверить положение function слова в выражении. Если function — это самое первое в утверждении, то это объявление функции. В противном случае это выражение функции.

Объявления функций подняты полностью. Это означает, что все тело функции перемещается наверх. Это позволяет вам вызывать функцию до того, как она была объявлена:

 showState(); // output: Ready function showState() { console.log("Ready"); } var showState = function() { console.log("Idle"); }; 

Попробуйте пример в JS Bin

Причина того, что предыдущий код работает, заключается в том, что движок JavaScript перемещает объявление функции showState() и весь ее контент в начало области. Код интерпретируется так:

 function showState() { // moved to the top (function declaration) console.log("Ready"); } var showState; // moved to the top (variable declaration) showState(); showState = function() { // left in place (variable assignment) console.log("Idle"); }; 

Как вы, возможно, заметили, поднимается только объявление функции, а выражение функции — нет. Когда функция назначается переменной, правила те же, что и для перемещения переменной (перемещается только объявление, а назначение остается на месте).

В приведенном выше коде мы увидели, что объявление функции имеет приоритет над объявлением переменной. И в следующем примере мы увидим, что когда у нас есть объявление функции по сравнению с присваиванием переменной, последний имеет приоритет.

 var showState = function() { console.log("Idle"); }; function showState() { console.log("Ready"); } showState(); // output: Idle 

Попробуйте пример в JS Bin

На этот раз мы вызываем showState() в последней строке кода, которая меняет ситуацию. Теперь мы получаем вывод «Idle». Вот как это выглядит при интерпретации движком JavaScript:

 function showState(){ // moved to the top (function declaration) console.log("Ready"); } var showState; // moved to the top (variable declaration) showState = function(){ // left in place (variable assignment) console.log("Idle"); }; showState(); 

То, что нужно запомнить

• Все объявления, как функции, так и переменные, поднимаются в верхнюю часть содержащей области перед выполнением любой части вашего кода.
• Сначала поднимаются функции, а затем переменные.
• Объявления функций имеют приоритет над объявлениями переменных, но не над назначениями переменных.