Как работают замкнутые функции?

Question

[Stanislav]

var add = (function () {
    var counter = 0;
    return function () {return counter += 1}
})();

add();
add();
add();

Какой алгоритм выполнения? По шагам. Почему такое не работает:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1; alert("s")}
})();

add();
add();
add();

Почему не срабатывает alert? Ведь каунтер увеличивается. У меня уже крыша едет...
И каким образом вообще это должно работать? Почему counter=0 делается только один раз, но при этом если написать так:

var add = (function () {
    var counter = 0;
	alert("check");
    return function () {return counter += 1;}
})();

То эта гребанная фигня выполняет чек, почему тогда каунтер не обнуляется постоянно? Что это за неведомый ужас? Как это вообще работает?

Answer 1

[Алексей]

Почему такое не работает

Вполне работает - codepen.io/anon/pen/VagRNa?editors=1111
Вы просто никуда результат не выводите.

Почему не срабатывает alert

Он находится вне вызываемой функции и вызывается один раз, когда создается замыкание.
При помощи add() вы вызываете только функцию function () {return counter += 1;} без alert.

Comments

[Stanislav]

Как такое вообще реально, хоспаде.
Вот например:
-------------------------
function shit() {
alert("s");
var counter = 0;
return function () {return counter += 1;}
};
var add=shit();
add();
add();
add();
-------------------------
Алерт в родительской функции вызывается только один раз, почему? Почему родительская функция совершает суицид? Где логика этого действия?

Я понимаю, что при уничтожении родительской функции, функция которая находится внутри нее - продолжает жить, но откуда она *** берет значениеcounter? Разве не все тело функции должно уничтожаться?

Или вот это чудо:
---------------------------
function shit() {
alert("s");
};
var add=shit();
add();
---------------------------
//var add=shit() - выводит alert, а add() - говорит, что это не функция.
Что это такое? Как это работает? Почему shit() - это не shit()?

[Stanislav]

Может я чего из основ функций не понимаю, найти эту заветную тему я не могу, гугл не понимает, может подскажите, что это за магическое свойство, что при var a=b(); - сразу приводит к выполнению b(), а потом a(); не работает.

[Алексей]

Ну сами проследите за логикой.
1) Начинаем определять функцию shit, которая сначала выводит alert, затем определяет переменную counter, затем создает еще одну функцию "return counter += 1;" и ее же возвращает. Далее вы присваиваете переменной add результат функции shit, а ее результат - функция "return counter += 1;" со своей областью видимости переменных, куда входит counter. Далее вызовы add() вызывают код "return counter += 1;".
2) Начинаете определять shit, который выводит alert и ничего не возвращает. Присваиваете переменной add результат функции shit (а она ничего не возвращает), и далее пытаетесь вызвать add(), безуспешно, так как add == null.

[Алексей]

Просто функция может возвращать "ничего", может возвращать число, строку, массив, а может возвращать функцию (код). Только код можно вызвать как переменная().

[Stanislav]

Алексей: где в это время хранится count? Как она вообще может храниться, если запускаем мы только вложенную функцию, которая и знать не знает об count, каким образом она достает count, даже если она лезет за ним во-вне, но в этом вовне лежит "var count=0;" что за магия? Или этого "var count=0;" как бы не существует? То тогда где этот count сохраняется?

[Stanislav]

Алексей: так, стоп. Я понял все, кроме единственного - где функция берет "сохраненное" значение count.

[Stanislav]

И еще не до конца понимаю, почему var a=b(); приводит к выполнению кода b()?

[D']

Stasgar: потому что b() - есть вызов функции b. Чтобы присвоить что-то чему-то не нужно это вызывать.
Т.е просто var a = b;
Когда мы пишем var a = b() - мы присваиваем результат выполнения функции b.

[Алексей]

Stasgar: Она его как раз из замыкания и берет. Считайте что вы создаете некий "блок", в котором есть переменная и функция. Функции бывают анонимными. Вот вы как раз и возвращаете анонимную функцию (без имени). Вы вполне могли бы сделать var func = function () { return ++count; }; return func; Получилось бы то же самое, просто функция была бы объявлена явно, с именем и так же была бы возвращена.
var a=b(); - как я уже писал выше - в переменной может находится значение (число, строка, массив) или функция, которую можно вызвать как "переменная();".

Answer 2

[Вадим]

При первом вызове этой строчки кода:
return function () {return counter += 1}
Js не найдет переменной counter в данной функции. После этого Js перейдет на 1 уровень вверх, чтобы поискать, не объявлена ли переменная counter выше. Переменная counter будет найдена и ее значение будет равно 0.
Стоит учесть что при выполнении этой функции, все переменные использованные в ее теле - сохраняются, то есть при последующих вызовах внутренней функции значение counter уже будет определено.

Comments

[Stanislav]

Определено нулем, почему нет?

[Stanislav]

Вот, полюбуйтесь:
----------------
function shit() {
alert("a");
return function(){alert("b")}
};
var x=shit();
x();
x();
----------------
Вопрос: почему alert("a") вызывается: когда мы присваеваем переменной x=shit(), почему операция присваивания вызывает вызов функции?

И почему при последующих x() вызывается только дочерняя функция, и где тогда еб** в рот хранится count в коде из шапки?

[itsjustmypage]

Stasgar:

1) shit() вызывает функцию, поэтому вместо вызова функции shit() подставляется результат её вызова - то, что находится после return, то есть анонимная функция function(){alert('b')}. Присваивание здесь не при чем, в любом месте это вызвало бы вызов функции. Чтобы работать с самой функцией, как со значением, можно просто передавать саму переменную: var x = shit;

2) Вызывается дочерняя, потому что именно она присвоилась в переменную var x. Почему - я написал выше.

3) Каждая функция при создании получает скрытое свойство [[Scope]], которое ссылается на лексическое окружение, в котором была создана. А лексическое окружение это скрытый объект функции LexicalEnvironment, хранящий в себе все переменные внутри самой функции. Он создаётся при запуске функции.

Замыкание в JS это способность видеть внешний контекст выполнения - внешние переменные. С помощью замыкания функции в JS запоминают значение нужных внешних переменных, причём у каждой функции своя копия, что позволяет делать всякие функции-счетчики, как в вопросе, причем много разных из одной функции.

Лучший материал на эту тему здесь - https://learn.javascript.ru/closures
А лучше прочти весь этот учебник.

[Stanislav]

itsjustmypage: хорошо, я прочитал и все понял. Т.е. при проходе функции в ПЕРВЫЙ раз(когда присваиваем var x=shit(); в count записывается единица, потом внутри возвращаемый функции это значение записывается в объекте scope и когда мы запускаем x() - мы запускаем грубо говоря возвращаемую функцию (т.к. shit() делает return function) и запускаем уже отдельную функцию со своим свойством .count в его scope, так? Т.е. чтобы записалось в scope - мы должны обязательно внешнюю переменную использовать? Или все внешние переменные пишутся в scope?

[Stanislav]

Да, все встало на места, теорию немного пропускал, думая, что концепция такая-же, как и в других ЯП, но судя по структуре js, тут многое придется переосмыслить.

[Stanislav]

Пойду учить теорию js с нуля.