Как работает замыкание в js?

Question

[fleshik]

function createCounter() { 
    let counter =0; 
   counter = counter - 10  
    const myFunction = function () { 
        counter = counter+1; 
        return counter 
    } 
    return myFunction 
} 
let z = createCounter() 
 
console.log(z()) 
createCounter() 
console.log(z())

Подскажите почему при последнем вызове console.log(z()) мы получаем (-8), а не (-9)
Первый вызов console.log(z()) нам дает let counter =0; далее (counter - 10 ) получаем (-10) далее
counter = (-10) + 1 =(-9); но ведь потом мы вызываем createCounter() и снова let counter =0; и при вызове console.log(z()) у нас let counter =0; почему мы тогда получаем (-8), а не (-9) где я допускаю ошибку
Подскажите почему так происходит и как работает данный код ?
Второй вопрос откуда берется counter при втором вызове console.log(z()) эта переменная берется с function createCounter() то есть перезаписанная let counter; или с функции myFunction (переменная counter = counter+1; )

Answer 1

[Вадим]

function createCounter() { 
    let counter =0; 
   counter = counter - 10  
    const myFunction = function () { 
        counter = counter+1; 
        return counter 
    } 
    return myFunction 
} 
let z = createCounter() // Вернули в переменную z функцию "myFunction" у которой в замыкании есть counter.
// counter внутри на данный момент равен -10.

// Вызвали функцию и вывели результат в консоль.
// Так как внутри функции counter берётся из замыкания, то при вызове функции получаем
// -10 + 1
console.log(z()) // -9

// В данном примере - бесполезный ничего не делающий вызов.
// То есть создаётся ещё один НОВЫЙ счётчик, со своим замыканием, но он никуда не сохраняется.
createCounter() 

// Снова вызвали функцию и вывели результат в консоль.
// -9 + 1 
console.log(z()) //  -8

где я допускаю ошибку

Судя по всему Ваша ошибка в том, что Вы считаете, раз снова вызвали функцию createCounter - то это на что-то влияет. Но нет. Это отдельный новый вызов нового счётчика, который потом в данном примере нигде не используется.

Второй вопрос откуда берется counter при втором вызове console.log(z())

Да всё оттуда же. Из замыкания. Когда Вы в первый раз вызвали функцию createCounter и сохранили результат её работы в переменную z - Вы в переменную z поместили функцию myFunction, у которой есть своё собственное замыкание на counter.
При каждом вызове z() будет вызываться та созданная функция со своим замыканием и оперировать с counter из него.

При новом вызове createCounter возвращается НОВАЯ функция myFunction у которой своё независимое от предыдущих вызовов замыкание.
То есть createFunction это как фабрика, которая выпускает одинаковые изделия(счётчики от -10, в данном случае), но изделия не зависят друг от друга.

Comments

[fleshik]

а переменная counter(или может правильнее сказать значение для этой переменной) при каждом вызове console.log(z()) откуда берется то есть как ее вообще видит функция myFunction она ее видит внутри себя или она берет ее из внешней функции createCounter

[Вадим]

fleshik, это читали? https://learn.javascript.ru/closure
При каждом вызове создаётся лексическое окружение в котором была создана функция. То есть доступная только функции область памяти так сказать. Оттуда и берётся.

[fleshik]

Вадим, да вроде всё читал и более мене понятно но не могу понять только один момент после того как произошел первый вызов console.log(z()) и в этом месте counter = counter+1; counter стал равен (-9) далее когда мы второй раз запускаем код console.log(z()) (код createCounter() в расчет не берем представим его нет) что происходит со строкой сounter = counter+1; функция будет брать это (-9) с этой строки и будет ли оно там вообще или оно очиститься при повторном вызове console.log(z()) и тогда будет взято (-9) которое находится во внешней функции там где было let counter =0; теперь ведь там let counter =(-9);

[Вадим]

fleshik,

первый вызов console.log(z()) и в этом месте counter = counter+1; counter стал равен (-9)

Верно

второй раз запускаем код console.log(z())

То происходит то же самое. counter = counter + 1. А так как counter равен на текущий момет, после первого вызова, -9, то counter = -9 + 1.

Может Вам будет понятнее если переписать код так(это не одно и то же, но иллюстрирует что примерно происходит под капотом):

let counter = -10;

function count() {
  counter = counter + 1;
  return counter
}

console.log(count()) // -9
console.log(count()) // -8
console.log(count()) // -7
console.log(count()) // -6

То есть при каждом вызове count изменяется внешняя переменная. В данном случае она глобальная.

В вашем изначальном примере происходит то же самое, только переменная не в глобальной области видимости, а в личной области видимости функции, которая вернулась из createCounter.

Таким образом, каждый раз когда происходит вызов createCounter создаётся область видимости для функции myFunction, к которой myFunction обращается каждый раз, когда происходит операция с counter.

[Вадим]

fleshik,
то есть
let z = createCounter()
1) Создалась новая переменная counter,
2) ей задалось значение -10,
3) создалась новая функция myFunction
4) Создалось новое замыкание для myFunction на counter с его текущим значением -10
5) Вернулась функция myFunction и сохранилась в переменную z

z()
1) Вызвалась функция сохранённая в переменную z
2) функция увидела что внутри неё нет собственной переменной counter и пошла искать его в своём замыкании.
3) нашла counter в замыкании и поменяла там значение
4) Вернула новое изменённое значение.

Следующий вызов z() делает то же самое:
1) Снова вызвалась
2) Снова нашла в замыкании
3) Снова изменила значение
4) Снова вернула изменённое значение.

И при каждом вызове z() функция будет ходить в замыкании и менять в нём значение, а потом его возвращать.

При каждом вызове createCounter происходит тоже самое, но НОВОЕ.
То есть создаётся новая переменная counter, новая функция myFunction, у которое своё собственное новое замыкание на counter, с которым эта функция будет работать при вызове.

[Вадим]

fleshik, Ну и ещё накину:

function createCounter() { 
   let counter = 0
   counter = counter - 10

   const myFunction = function () { 
     counter = counter+1
     return counter 
   }
 
   return myFunction 
} 

let z = createCounter() 
let y = createCounter()
let x = createCounter() 

console.log(z()) // -9 
console.log(z()) // -8
console.log(z()) // -7

console.log(y()) // -9
console.log(y()) // -8

console.log(x()) // -9 

console.log(z()) // -6

[fleshik]

Принцип работы я понял и как это всё происходит я не я не могу понять если при первом вызове в примере

let counter = -10;

function count() {
  counter = counter + 1;
  return counter
}

console.log(count())

функция смотрит на глобальную переменную и значение (-10) берет из нее ведь внутри самой функции у counter нет никакого значения но когда мы второй раз вызываем console.log(count()) значение как глобальной переменной counter так и переменной counter которая внутри самой функции будут (-9) и тут вопрос что происходит дальше функция посмотрит на переменную внутри себя и возьмет ее значение или посмотрит на глобальную переменную и возьмет ее значение

[Вадим]

fleshik, у функции нет своей собственной переменной. Ни при первом вызове, ни при каком либо последующем.

[fleshik]

Вадим, вроде теперь стало проясняться вопрос только что значит "у функции нет своей собственной переменной. Ни при первом вызове, ни при каком либо последующем." а чем тогда является counter = counter + 1; разве counter который слева от "=" это не переменная ?

[Вадим]

fleshik, Переменная, но не собственная для функции. Собственной для функции она бы была если бы была объявлена через соответствующее ключевое слово - var/let/const, либо была бы аргументом функции.

А так, запись counter = counter + 1 в движке выполняется примерно так(код выполняется справа налево):
1) прибавить 1 к
2) counter
3) Что такое counter? Идём искать.
4) Нашли снаружи что counter это -10 (при первом вызове)
5) отлично, значит прибавляем 1 к -10, получаем -9
6) Ага, оператор =, значит нужно результат операции сложения поместить в какую то переменную
7) В какую? counter? Ищем counter - найдено снаружи.
8) Меняем значение снаружи на -9.

[fleshik]

Вадим, 4) Нашли снаружи что counter это -10 (при первом вызове),
а при втором вызове 4 пункт будет такой Нашли снаружи что counter это -9(то есть -9 мы будем брать именно снаружи а не искать здесь counter = counter + 1;) правильно ?

[Вадим]

fleshik, да, при втором вызове всё абсолютно точно так же, кроме значения. Будет не -10, а -9, а результат соответственно -8

[fleshik]

Вадим, всё наконец то понял спасибо большое

Answer 2

[Сергей Соколов]

Каждый вызов createCounter() создаёт и возвращает новую функцию. С которой в комплекте идёт свой новый «чемодан» замыкания, в котором лежит своя переменная counter.
Каждый раз отдельная-новая.

откуда берется counter при втором вызове console.log(z())

Из того же «чемодана» от первого вызова createCounter()

Comments

[fleshik]

то есть функция myFunction при втором и последующих вызовах не будет брать значение counter отсюда counter = counter+1; а будет обращаться к counter который в функции createCounter()

[Сергей Соколов]

fleshik, не совсем: тут важен Вызов функции createCounter()
Вызов создаёт экземпляр окружения, в котором лежит counter = -10 и в связке с ним экземпляр функции myFunction – он попадает в переменную z

Так что вызывая z() имеем дело с отдельным экземпляром функции, которая, к тому же, тащит с собой окружение, в котором лежит свой счетчик counter.

const a = createCounter();
const b = createCounter();

a(); a(); a(); // -9, -8, -7
b(); b(); // -9, -8
a(); -6

а и b — сами по себе, независимы.