Замыкания в Javascript?

Question

[agromov91]

Как проще всего понять замыкания?

В чем например разница между кодом без него

let n = 0;

function createCalcFunction() {
  console.log(++n);
}

createCalcFunction();
createCalcFunction();
createCalcFunction();

И с ним

let n = 0;

function createCalcFunction() {
  return function() {
    console.log(++n);
  };
}

const calc = createCalcFunction();
calc();
calc();
calc();

Comments

[Robur]

В ваших примерах никакой разницы нет.

[agromov91]

Robur, Просто везде про них в примерах приводится как раз счетчик))

[G F]

Так у тебя в обоих случаях замыкание, а счетчик или нет значения не имеет

[Ярослав Иванов]

agromov91, в этих примерах нет замыкания.

[Ярослав Иванов]

function createCalcFunction() {
  len n = 0;

  return function() {
    console.log(++n);
  };
}

const calc = createCalcFunction();
calc();
calc();
calc();

[agromov91]

G F, Ярослав Иванов, Так есть или нет?))

[Robur]

agromov91, есть. Но вы этот факт никак не используете в том смысле в каком обычно используют замыкания, поэтому как бы и нет.

[agromov91]

Нашел на mdn пример.

function makeSizer(size) {
  return function() {
    document.querySelector('h1').style.fontSize = size + 'px';
  };
};

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

Правильно я понимаю, что в данном случае если сделать одной функцией без замыкания, то эти функции будут срабатывать сразу при загрузке страницы?

[skolzage]

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

[agromov91]

skolzage, Ага. Уже разобрался в чем фишка. Например когда нужно функцию с разным параметром запустить, а переменные не плодить.

function createCalcFunction(n) {
  return function() {
    console.log(n++);
  };
}

const calc = createCalcFunction(10);
calc();
calc();
calc();

const calc2 = createCalcFunction(20);
calc2();
calc2();
calc2();

[Ярослав Иванов]

agromov91, Я написал пример кода с замыканием.
Robur, ты прав что оно есть и не используется но мне кажется автора вопроса это запутает) думаю если упросить, что так как переменная за пределами функции то и замыкания как бы нет)

Answer 1

[Дмитрий Дерепко]

https://learn.javascript.ru/closure

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Исчерпывающее кол-во примеров и разъяснений