Замыкания не существует?

Question

[Kolya112151]

Изучаю эти "замыкания". Говорят, замыкание, это когда функция имеет доступ к переменной из функции, которая уже завершила свою работу. И приводят этот пример:

function one() {
  const oneVar = 'Hello!'

  function two() {
    console.log(oneVar)
  }

  return two
}

const three = one()

three()

Якобы в этом примере three() имеет доступ к переменной oneVar, благодаря замыканию. Что за бред? three() просто вызывает функцию one(), причём тут какое-то замыкание? Просто вызов той же самой функции, причём доступ к переменной как раз происходит во время работы функции. То есть функция не завершила свою работу.

Comments

[Василий Банников]

Если разбирать по шагам, то в переменной three хранится не функция one, а экземпляр функции, который вернула функция one после первого вызова.

Гораздо интереснее это всё будет выглядеть, если добавить изменемое состояние:

const counter = () => {
  let count = 0;
  return () => count++;
};

const c1 = counter();
const c2 = counter();

console.log(c1()); // 0
console.log(c1()); // 1
console.log(c1()); // 2

console.log(c2()); // 0
console.log(c2()); // 1
console.log(c2()); // 2

Если замыканий якобы нет, то что это?

[Kolya112151]

Василий Банников, спасибо, теперь более понятно, хотя всё равно странно. Проблема была в том, что я сначала думал, что если c1 = counter(), то значит c1() будет равняться counter()(). Но видимо c1 всё-таки сначала возвращает значение и только потом прибавляет скобки, а тогда получается не counter()(), а two(). Хотя я пока что без понятия почему именно такой порядок.

Но главное, что исходя из этого, теперь видно, что функция действительно завершила свою работу.

Answer 1

[Stalker_RED]

Я немного добавил наглядности

function one() {
  const oneVar = 'Hello!'
  let counter = 0;
  console.log('функция one работает прямо сейчас, в счетчике', counter)

  function two() {
    console.log(oneVar, ++counter)
  }
  
  console.log('функция one почти завершилась, в счетчике все еще ', counter);
  return two
}

const three = one();
console.log('функция one точно завершилась, даже return сработал');
console.log('в переменной three сейчас функция two()');
console.log(three);


three();
three();
three();
console.log('обожемой, мы видим как менялась переменная в уже завершенной функции. чераная магия? нет - это называется замыкание!');

выхлоп:

"функция one работает прямо сейчас, в счетчике", 0
"функция one почти завершилась, в счетчике все еще ", 0
"функция one точно завершилась, даже return сработал"
"в переменной three сейчас функция two()"
function two() {
  console.log(oneVar, ++counter)
}
"Hello!", 1
"Hello!", 2
"Hello!", 3
"обожемой, мы видим как менялась переменная в уже завершенной функции. чераная магия? нет - это называется замыкание!"

Answer 2

[Rsa97]

Функция one() определяет переменную oneVar. Затем в ней определяется функция two(), в лексическое окружение которой попадает oneVar. В конце своей работы функция one() возвращает в качестве результата функцию two().
В переменную three записывается результат работы one(), то есть функция two(). Несмотря на то, что one() уже закончила работу, переменная oneVar сохраняется в лексическом окружении функции two().
При вызове three() фактически вызывается two(), в которой переменная oneVar доступна для использования.

Comments

[szQocks]

Затем в ней определяется функция two(), в лексическое окружение которой попадает oneVar.

oneVar - не попадает в лексическое окружение функции two, а функция two имеет доступ к вышестоящему лексическому окружению функции one

[Kolya112151]

То есть возврат функции two, превращается в её вызов?

upd: А, ну по сути всё логично. Это просто вызов функции внутри функции. Тоже самое, что написать one()(), вместо three(). Когда мы пишем three, то фактически вызывается one(), а когда мы пишем three(), то идёт вызов one()(). И всё работает как обычно, функция two получает доступ к переменной из one, когда one ещё работает, а не завершила свою работу! Ну и нет никакого "замыкания"

[szQocks]

Kolya112151, в твоё примере замыкание в том что функция two замкнула в своём лексическом окружении ссылку на oneVar, и не обязательно возвращать функцию, ты можешь вернуть объект или прямо в объекте замкнуть, правда изменить переменные ты сможешь только через функции, поэтому что бы не парится - замыкание показывают сразу на возврате какой-то функции, тебе уже скинули много ссылок, и всё разжевали, изучи просто лексическое окружение и всё

[Rsa97]

Kolya112151, Нет. На момент вызова функции two() функция one() уже завершила работу.

[Rsa97]

szQocks, Если ещё точнее, то в лексическом окружении функции two() находится ссылка на лексическое окружение вышестоящей функции one(), в котором находится переменная oneVar.

A Lexical Environment consists of an Environment Record and a possibly null reference to an outer Lexical Environment.

[szQocks]

Rsa97, да да, верно, супер

[Александр]

Kolya112151, профайлер Вам в помощь, убедитесь на собственном опыте.

[Kolya112151]

Александр, профайлер? Это кто такой вообще?))

[Александр]

Kolya112151, гуглите. Chrome Dev Tools, Chrome Profiler - как угодно.

[Kolya112151]

Александр, а, инструменты разработчика. Ну да, я как раз через консоль и узнал, что в моём примере three() не было аналогично one()().
Я увидел, что при вызове three(), скобки прибавляются не к one(), а к возвращаемому значению функции one().
То есть при записи three(), сначала идёт запуск функции one(), возвращается two и затем уже к two прибавляются скобки, то есть three() равняется two(). Хотя пока что не особо ясно почему именно такой порядок. Но главное, что теперь виден факт доступа к переменной функции, после её завершения.

Answer 3

[Василий Банников]

Замыкания есть.
Только в спецификации это называется "Lexical Environment" (п 8.1)
https://262.ecma-international.org/10.0/#sec-lexic...
Вот ещё с MDN:
https://developer.mozilla.org/en-US/docs/Web/JavaS...

Answer 4

[Hemul GM]

Что за бред? three() просто вызывает функцию one(), причём тут какое-то замыкание?

three() - это ссылка на two(), а не на one() и соответственно вызывает код two(), которая ссылается на переменную функции one();

Вот тебе пример (но на Делфи). Отличий по сути нет. Вызов функции, которая помещена в getOne изменяет значение параметра, который был передан в canGetCount()

function canGetCount(N: Integer): TFunc<string>;
begin
  Result :=
    function: string
    begin
      Dec(N);
      Exit(IfThen(N >= 0, 'yes', 'no'));
    end;
end;

begin
  var getOne := canGetCount(2);
  writeln(getOne()); //yes
  writeln(getOne()); //yes
  writeln(getOne()); //no
  readln;
end.