Функции "изнутри", замыкания

Механизм работы функций и переменных в JavaScript очень отличается от большинства языков.

В этой главе мы разберем его подробно, чтобы легко было перейти к более продвинутым темам.

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

Лексическое окружение верхнего уровня называют global object (глобальный объект). В браузере этот объект доступен как window.

Присваивая или читая переменную вне функций, мы фактически работаем с этим объектом.

Например:

var a = 5;   // создает и присваивает свойство window.a
alert(window.a); // 5

Свойства и функции, которые находятся в window, называют глобальными.

Порядок создания глобальных переменных и функций

Перед выполнением первой строчки кода происходит инициализация.

Скрипт сканируется на предмет объявления функций вида Function Declaration, а затем — на предмет объявления переменных var .... Каждое такое объявление добавляется в лексическое окружение. При этом функции создаются сразу рабочие, а переменные равны undefined.

Затем код начинает выполняться, и уже на фазе выполнения происходит присвоение (=) значений переменным.

// При входе в область видимости, до выполнения кода (скрипт еще не запустился!)
*!*
// window = { f: function, a: undefined, g: undefined }
*/!*

var a = 5;   // window.a=undefined создаётся при инициализации (до выполнения)

function f(arg) { /*...*/ }  // window.f = function, при инициализации

var g = function(arg) { /*...*/ }; // window.g = undefined, при инициализации

Кстати, то что к началу выполнения кода, переменные и функции уже содержатся в window, можно легко проверить:

alert("a" in window); // *!*true*/!*,  т.к. есть свойство window.a 
alert(a); // равно *!*undefined*/!*,  т.к. значение будет присвоено ниже
alert(f); // *!*function*/!*,  готовая к выполнению функция
alert(g); // *!*undefined*/!*, т.к. это переменная (значение присвоится ниже)

var a = 5;  
function f() { /*...*/ } 
var g = function() { /*...*/ }

Итак, в результате, к началу выполнения кода:

1. Функции, объявленные как Function Declaration, создаются полностью и готовы к использованию.
2. Переменные объявлены, но равны undefined. Присваивания выполнятся позже, когда выполнение дойдет до них.

a = 5;

*!*
alert(a); // undefined
*/!*

var a = 5;

*!*
alert(a); // error, a is not defined
*/!*

a = 5;

*!*var*/!* i;
{
  i = 5;
}

i = 5;
{
  *!*var*/!* i;
}

for (*!*var*/!* i=0; i<5; i++) { }

*!*var i;*/!*
for (i=0; i<5; i++) { }

var i = 10;

for (var i=0; i<20; i++) {
  ...
}

var i = 5;

Вопросы на понимание

if ("a" in window) {
    var a = 1;
}
alert(a);

if ("a" in window) {
    a = 1;
}
alert(a);

if ("a" in window) {
    a = 1;
} 
alert(a);  // <-- error!

if ("a" in window) {
    a = 1;
}
var a;

alert(a);

if ("a" in window) {
    a = 1;
}
var a;

alert(a); // 1

var a = 5; 
 
function a() { }

alert(a);

var a = 5; 
 
function a() { }

alert(a);

Особенности window в IE<9

Каждая глобальная переменная является свойством window… В том числе, и сам `window:

alert(window); 
alert(window.window);

Но здесь есть очень интересная разница, которая существенна для браузеров IE<9. А именно, в них «обычный» window и его свойства window.window, window.window.window… — разные объекты!

Запустите в IE<9:

alert(window == window.window); // false
alert(window.window == window.window.window); // true

Это всё могло бы быть чистой теорией, но у неё есть важные следствия.

1. Переопределение переменной, у которой такое же имя, как и id элемента, в IE<9 приведет к ошибке:
   

   <div id="a">...</div>
   <script> 
     a = 5;    // ошибка в IE<9! Правильно будет "var a = 5"
     alert(a); // никогда не сработает
   </script>
   

   По всей видимости, здесь идёт перезапись во «внешнем» объекте window, поэтому — ошибка. А если сделать через var, то переменная попадает в правильный «внутренний» window.window и всё будет хорошо. Это лишь догадки, у автора нет доступа к исходным кодам IE.

2. Присутствует баг с рекурсией через функцию-свойство window. Следующий код «умрет» в IE<9:
   

   <script>
   // рекурсия через функцию, явно назначенную во "внешний" `window`.
   window.recurse = function(times) {
     if (times !== 0) recurse(times-1);
   }
   
   recurse(13);
   </script>
   

   Этот пример выдаст ошибку только в настоящем IE8! Не IE9 в режиме эмуляции. Вообще, режим эмуляции позволяет отлавливать где-то 95% несовместимостей и проблем, а для оставшихся 5% вам нужен будет настоящий IE8 в виртуальной машине.

Локальные переменные

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

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

Посмотрим пример, чтобы лучше понимать как это работает:

function sayHi(name) {
  var phrase = "Привет, " + name;
  alert(phrase);
}

sayHi('Вася');

1. При вызове функции, до выполнения первой строчки её кода, интерпретатор создает пустой объект LexicalEnvironment и заполняет его.

   В данном случае туда попадает аргумент name и единственная переменная phrase:

   function sayHi(name) {
   *!*
     // LexicalEnvironment = { name: 'Вася', phrase: undefined }
   */!*
     var phrase = "Привет, " + name;
     alert(phrase);
   }
   
   sayHi('Вася');
   

2. Функция выполняется.

   Происходит присвоение локальной переменной phrase, которое является по сути присвоением свойству LexicalEnvironment.phrase нового значения:

   function sayHi(name) {
     // LexicalEnvironment = { name: 'Вася', phrase: undefined }
     var phrase = "Привет, " + name;
   
   *!*
     // LexicalEnvironment = { name: 'Вася', phrase: 'Привет, Вася'}
   */!*
     alert(phrase);
   }
   
   sayHi('Вася');
   

3. В конце выполнения, объект с переменными обычно выбрасывается и память очищается.

Доступ ко внешним переменным

Из функции мы можем обратиться не только к локальной переменной, но и к внешней:

var a = 5;

function f() {
  alert(a);  // 5
}

При этом интерпретатор сначала пытается найти ее в текущем объекте с переменными, а затем — ищет ее во внешнем LexicalEnvironment. В данном случае им является window, т.е. выводится window.a.

Рассмотрим повнимательнее, как это работает.

1. Все начинается с момента создания функции. Функция создается не в вакууме, а в текущем LexicalEnvironment.

   В случае выше функция создается в глобальном лексическом окружении window:

   

   Для того, чтобы функция могла в будущем обратиться к внешним переменным, в момент создания она получает скрытое свойство [[Scope]], которое ссылается на объект с переменными, в котором она была создана:

   

2. Позже, приходит время и функция запускается.

   На момент создания существовало только свойство f.[[Scope]]:

   

   .. Теперь же функция запущена и создает свой собственный объект с переменными.

   Новый объект LexicalEnvironment получает ссылку на «внешнее лексическое окружение» со значением из [[Scope]]. Эта ссылка используется для поиска переменных, которых нет в текущей функции.

   Например, alert(a) сначала ищет в текущем объекте переменных: он пустой. А потом, как показано зеленой стрелкой на рисунке ниже — по ссылке, во внешнем окружении.

   

   На уровне кода это выглядит как поиск во внешней области видимости, вне функции:

   

var value = 0;

function f() {  
  if (1) {
    value = true;
  } else {
    var value = false;
  }

  alert(value);
}

f();

function test() {
  
  alert(window);

  var window = 5;
}

test();

LexicalEnvironment = {
  window: undefined
}

var a = 5

(function() {
  alert(a)
})()

var a = 5

(function() {
  alert(a)
})()

var a = 5(function() {
  alert(a)
})()

var a = 5;

(function() {
  alert(a)
})()

Вложенные функции

До этого мы рассматривали случай, когда функция находится в window. Но в JavaScript функции могут быть вложены, т.е. можно определить одну функцию внутри другой.

Например, создадим новую функцию g внутри f и вернем ее:

var a = 1, b = 2;

function f() {
  var a = 2;

  return function g() {  // Named Function Expression
    alert(a + b);
  };
}

var g = f();
g(); // 4

При выполнении функции f создается новая функция g.

Она получает ссылку g.[[Scope]] на лексическое окружение LexicalEnvironment, соответствующее текущему запуску f:

Обратите внимание, функция g определена как Named Function Expression, поэтому её имя g является внутренним и отсутствует в объекте переменных f.

На этом этапе пока есть только два объекта с переменными: для текущего запуска f, со ссылкой на внешний объект window. Функция g пока не начала выполняться, для нее создается только [[Scope]].

При вызове внутренней функции g в ней создается свой, новый объект с переменными и, таким образом, образуется цепочка LexicalEnvironment g -> f -> window:

var a = 1, b = 2;

// window 
function f() {
  var a = 2;

  // LexicalEnvironment для f -> window 
  return function g() { 
    // LexicalEnvironment для g ->  LexicalEnvironment для f 

*!*
    alert(a+b); // ищем переменные: LexEnv для g -> LexEnv для f -> window (*)
*/!*

  };

}

var g = f();
g(); // 4

Как ищется a? (*)

Собственный LexicalEnvironment функции g будет пустой, т.к. никаких переменных и аргументов в g нет.

Переменная a будет искаться сначала в нем {}, а затем — пойдет по ссылке во внешний LexicalEnvironment для f, который содержит {a : 2}, откуда и будет взята.

Как ищется b? (*)

При поиске b интерпретатор поищет ее в {}, затем во внешнем объекте {a : 2}, затем в window, откуда и возьмет значение.

[[Scope]] для new Function

Есть одно исключение из общего правила. При создании функции с использованием new Function, её свойство [[Scope]] ссылается не на текущий LexicalEnvironment, а на window.

Следующий пример демонстрирует как функция, созданная new Function, игнорирует внешнюю переменную a и выводит глобальную вместо нее.

Сначала обычное поведение:

var a = 1;
function getFunc() {
  var a = 2;
 
*!*
  var func = function() { alert(a); };
*/!*

  return func; 
}

getFunc()(); // *!*2*/!*, из LexicalEnvironemnt функции getFunc

А теперь - для функции, созданной через new Function:

var a = 1;
function getFunc() {
  var a = 2;
 
*!*
  var func = new Function('', 'alert(a)');  
*/!*

  return func;
}

getFunc()(); // *!*1*/!*, из window

Итого

1. Все переменные и параметры функций являются свойствами объекта переменных LexicalEnvironment. Каждый запуск функции создает новый такой объект.
   На верхнем уровне роль LexicalEnvironment играет «глобальный объект», в браузере это window.
2. При создании функция получает системное свойство [[Scope]], которое ссылается на LexicalEnvironment, в котором она была создана (кроме new Function).
3. При запуске функции её LexicalEnvironment ссылается на внешний, сохраненный в [[Scope]]. Переменные сначала ищутся в своём объекте, потом — в объекте по ссылке и так далее, вплоть до window.

Разрабатывать без замыканий в JavaScript почти невозможно. Вы еще не раз встретитесь с ними в следующих главах учебника.