1

Все знают что объявление:

for(let i = 0; i < 10; i++) {
    alert("message")
} 

создает на каждой итерации отдельную переменную i что позволяет писать такие конструкции как:

for(let i = 0; i < 10; i++) {
    setTimeout(function(){alert(i)},1000*i)
}

с применением var этого было бы невозможно без создания замыкания.

Вопрос в том как работает let? Как представить его работу в коде? Если с var понятно, то с let возникают трудности.

5
  • что именно непонято с let?
    – Grundy
    4 окт 2017 в 13:42
  • 1
    Открываем стандарт и читаем "13.3 Declarations and the Variable Statement". Грубо говоря, каждый раз в контексте создается новая ссылка и если у var они указывают на одну область в памяти, то у let ссылки контекста ссылаются на разную область.
    – Alex Krass
    4 окт 2017 в 14:00
  • @Grundy механизм, как так получается что в цикле для каждой итерации создается своя переменная?
    – MaximPro
    4 окт 2017 в 17:30
  • @AlexKrass Читал стандарт. Там есть 3 варианта для первого "аргумента" в цикле for: Expression(opt) или var VariableDeclarationList или LexicalDeclarationExpression(opt). Честно говоря сложно понять что имеется ввиду под каждым случаем. И да это 13.7.4
    – MaximPro
    4 окт 2017 в 17:35
  • Собственно смотри на Runtime Semantic, там расписано что происходит
    – Grundy
    4 окт 2017 в 17:41

2 ответа 2

1

Схематично процесс выполнения для цикла

for (let i=0; i<2; i++) { 
    setTimeout(function(){alert(i)},1000*i) 
}

можно представить так:

var loopEnv = {
    i: 0
};

var iter1Env = {};
iter1Env.i = loopEnv.i; // 0

if(iter1Env.i<2 == false) return;

setTimeout(function(){alert(iter1Env.i)},1000*iter1Env.i)

var iter2Env = {};
iter2Env.i = iter1Env.i; // 0
iter2Env.i++; // 1

if(iter2Env.i<2 == false) return;

setTimeout(function(){alert(iter2Env.i)},1000*iter2Env.i)

var iter3Env = {};
iter3Env.i = iter2Env.i; // 1
iter3Env.i++; // 2

if(iter3Env.i<2 == false) return; // 2 < 2 == false -> return

Отсюда видно, что замыкаются на каждой итерации разные объекты. В случае с var это был бы один объект.

Подробнее можно увидеть в спецификации:

  1. IterationStatement:
    for(LexicalDeclaration Expression; Expression) Statement
  2. Runtime Semantics: ForBodyEvaluation
  3. Runtime Semantics: CreatePerIterationEnvironment( perIterationBindings )
3
  • Хоть я это и давно спрашивал, сейчас для меня не так тяжело читать доки ;) Одна строчка удивила: If isConst is false, let perIterationLets be boundNames; otherwise let perIterationLets be « ». Что значит: be « » - что это за пробел в кавычках? Я бы понял бы null или undefined а там просто пробел. P.S Прочитали мое объяснение про окружения?
    – MaximPro
    10 янв 2018 в 5:48
  • @MaximPro, be « » - значит - пустой список.
    – Grundy
    10 янв 2018 в 6:09
  • принято, понято!
    – MaximPro
    10 янв 2018 в 6:17
1

При использовании let в цикле, для каждой итерации создаётся своя переменная.

Переменная var – одна на все итерации цикла и видна даже после цикла:

for(var i=0; i<10; i++) { /* … */ }

alert(i); // 10

С переменной let – всё по-другому.

Каждому повторению цикла соответствует своя независимая переменная let. Если внутри цикла есть вложенные объявления функций, то в замыкании каждой будет та переменная, которая была при соответствующей итерации.

Пример

function makeArmy() {

  let shooters = [];

  for (let i = 0; i < 10; i++) {
    shooters.push(function() {
      alert( i ); // выводит свой номер
    });
  }

  return shooters;
}

var army = makeArmy();

army[0](); // 0
army[5](); // 5

Если бы объявление было var i, то была бы одна переменная i на всю функцию, и вызовы в последних строках выводили бы 10

А выше объявление let i создаёт для каждого повторения блока в цикле свою переменную, которую функция и получает из замыкания в последних строках.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.