Как понять замыкания, а в частности, присвоения вида fn = function()?

Question

[Павел Клешнин]

Я никак не могу понять объявление функции типа var counter = makeCounter();
После этого вызов counter() идентичен вызову makeCounter()()?

Вот пример - счетчик. Почему он в первом случае не работает, а во втором - работает? Насколько я понимаю, внутренняя анонимная функция берет numberOfCalls из внешнего окружения и изменяет ее, но почему первый пример не работает - непонятно.

function createCounter() {
   var numberOfCalls = 0;
   return function() {
      return ++numberOfCalls;
   }
}
createCounter()();
createCounter()();
alert(createCounter()()); // выводит 1

var fn = createCounter();

fn();
fn();
alert(fn()) // выводит 3

Answer 1

[Vitaliy]

Почему первый не работает? Там все как надо:
при вызовеcreateCounter()инициализируется numberOfCallsсо значением 0 и возвращается функция, которая "видит" эту переменную. В дальнейшем вызове этой анонимной функции она все так же будет видеть numberOfCalls.

В первом случае при вызове createCounter заново каждый раз создается переменная с 0
Во втором случае при вызове fn()одна и та же анонимная функция использует одну и ту же переменную numberOfCalls

Comments

[Павел Клешнин]

Пардон, она не работает так, как этого хочу я :)
Я предполагал, что каждый раз создается новая переменная со значением 0, но, видимо, я не совсем понимаю вызовы типа ()(). Чем отличаются вызовы fn() и createCounter()()?

[Vitaliy]

Павел Клешнин, при fn() уже есть в памяти переменная и анонимная функция, а в первом случае они каждый раз создаются новые

Answer 2

[Pretor DH]

Все просто. В замыкании и не замыкании нет разницы для интерпретатора - это не исключительная ситуация.
Нужно понять: замыкание это алгоритм, а не конструкция как например цикл или функция!!!

Функция createCounter() - возвращает анонимную функцию.
В анонимной функции используется переменная createCounter.

При просто вызове createCounter()(); :
createCounter() - инициализирует переменную (три раза) и возвратит анонимную функцию.
И три раза происходит вызов анонимной функции - вторые ().
После каждого из трех вызовов переменная numberOfCalls созданная при вызове createCounter уже не нужна.
Анонимная функция больше не будет использована в этом контексте.
В итоге функция и замкнутая переменная три раза попадают в уборщик мусора.

При Сохранении анонимной функции в переменную:
Во-первых: numberOfCalls будет инициализирована только один раз, при записи fn = createCounter().
Где контекст анонимной функции записывается в переменную fn.
Во-вторых: так как контекст вызова сохранен, то замкнутая переменная и анонимная функция останутся лежать в нем.
В-третьих: при каждом вызове анонимной функции в сохраненном контексте переменная будет увеличиваться так как старое значение не инициализировано и не выброшено.

var fn = createCounter();

fn();
fn();
alert(fn())  // =3
fn = createCounter();
fn();
alert(fn())  // =2

Comments

[Павел Клешнин]

Спасибо за подробный ответ. Нужно мне, видимо, подучить работу интерпретатора. Ибо пока сильно туплю в подобных ситуациях.

Answer 3

[Алексей Ярков]

Вызывая createCounter()() вы каждый раз заново создаете такой участок:

var numberOfCalls = 0;
   return function() {
      return ++numberOfCalls;
   }

Вызывая

var fn = createCounter()
fn()
Вы создаете этот участок один раз и в fn теперь ссылка на этот код. То есть переменная numberOfCalls не обнуляется каждый раз.
- - -
Объяснил как смог )))

Comments

[Павел Клешнин]

Спасибо, это я понял. Но вот никак до меня не допрет, почему fn() и createCounter()() не идентичны? Ведь мы создали fn = createCounter(), значит, fn() будет равно createCounter()()?

[Алексей Ярков]

createCounter() - каждый раз создает внутри себя все заново
const fn = createCounter() - создает один раз, сохраняет в переменную ссылку и дальше работает по ссылке

[Pretor DH]

Павел Клешнин,

fn() равно ( fn = createCounter()) ();

Почувствуй разницу!

[Павел Клешнин]

Pretor DH, от где собака зарыта. Спасибище.