WedX - журнал о программировании и компьютерных науках

Как этот цикл работает на Es5/Es6?

Итак, пытаясь немного узнать о ES6, я наткнулся на эту ссылку, https://es6-features.org/#BlockScopedVariables

// ES6

let callbacks = []
for (let i = 0; i <= 2; i++) {
    callbacks[i] = function () { return i * 2 }
}
callbacks[0]() === 0
callbacks[1]() === 2
callbacks[2]() === 4

// ES5

var callbacks = [];
for (var i = 0; i <= 2; i++) {
    (function (i) {
        callbacks[i] = function() { return i * 2; };
    })(i);
}
callbacks[0]() === 0;
callbacks[1]() === 2;
callbacks[2]() === 4;

Могу ли я узнать, почему в методе ES5 мы используем немедленную функцию для возврата значения i * 2?

Но в ES6 работает просто присвоение значения в цикле?

В принципе,

  1. Хотите знать, почему возникает эта разница?
  2. Как этот цикл выполняется?
  3. Я считаю, что разница связана с «блочной областью (let) и глобальной областью (var)», но хотите узнать больше о точке выполнения/времени выполнения?
  4. Значит, мы не хотим использовать немедленную функцию для сохранения текущего состояния переменной в ES6?
javascript ecmascript-6 ecmascript-5
01.07.2015

Ответы:


1

Как вы говорите, разница заключается в использовании let, которая создает переменную с областью действия блока, и с использованием var, которая создает переменную области контекста выполнения - не только глобальную, но и область действия исполняемой функции.

// ES6
var callbacks = [];
for (let i = 0; i <= 2; i++) {
    // A new LexicalEnvironment is established here, where i only survives
    // the duration of this 'for' statement
    // So we can safely say that when function() is called, `i` will have
    // the value we assign to it here
    callbacks[i] = function () { return i * 2 }
}

Однако в ES5...

// LexicalEnvironment is established here and `i` is declared
var callbacks = [];
for (var i = 0; i <= 2; i++) {
    callbacks[i] = function() { return i * 2; };
}
// `i` is still available now and its value is currently 2
// So when you execute `callbacks[2]()` the LexicalEnvironment where `i` was set
// is the one where i === 3
callbacks[0]() // 6
callbacks[1]() // 6
callbacks[2]() // 6

Теперь, используя IIFE в ES5...

var callbacks = [];
for (var i = 0; i <= 2; i++) {
    // Much like using let, by declaring an IIFE here, we are telling the engine
    // to create a new LexicalEnvironment to store the current value of i
    (function (i) {
        callbacks[i] = function() { return i * 2; };
    })(i);
}
01.07.2015
  • Поддерживает ли Ecmascript6 подъем? 01.07.2015
  • @ Сатиш Да. Что касается подъема, то для let применяются те же правила, что и для var, за исключением того, что вы не сможете получить доступ к объявленной переменной let за пределами области ее блока. 01.07.2015
    • Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    Для любых предложений по сайту: [email protected]