Представления активов DAM - получение представления cq5dam.thumbnail.48.48.png, но требуется исходное представление

Я стараюсь лучше учиться на тестах GOOD / BAD. Мне нравится видеть рабочий код, за которым следует нерабочий код, с которым кто-то может столкнуться. Я собрал a jsFiddle , который делает сравнение, и пытается свести различия к простейшим объяснениям, которые я мог бы придумать.

Завершения выполнены правильно:

console.log('CLOSURES DONE RIGHT');

var arr = [];

function createClosure(n) {
    return function () {
        return 'n = ' + n;
    }
}

for (var index = 0; index < 10; index++) {
    arr[index] = createClosure(index);
}

for (var index in arr) {
    console.log(arr[index]());
}

• В приведенном выше коде createClosure(n) вызывается на каждой итерации цикла. Обратите внимание, что я назвал переменную n, чтобы выделить, что это новая переменная, созданная в новой области функций, и не является той же переменной, что и index, которая привязана к внешней области.
• Это создает новая область и n привязаны к этой области; это означает, что у нас есть 10 отдельных областей, по одному для каждой итерации.
• createClosure(n) возвращает функцию, которая возвращает n в пределах этой области.
• В пределах каждой области n независимо от того, какое значение оно имело, когда createClosure(n) был вызван, поэтому вложенная функция, которая возвращается, всегда будет возвращать значение n, которое оно имело при вызове createClosure(n).

Завершение сделано неправильно :

console.log('CLOSURES DONE WRONG');

function createClosureArray() {
    var badArr = [];

    for (var index = 0; index < 10; index++) {
        badArr[index] = function () {
            return 'n = ' + index;
        };
    }
    return badArr;
}

var badArr = createClosureArray();

for (var index in badArr) {
    console.log(badArr[index]());
}

• В приведенном выше коде цикл был перемещен внутри функции createClosureArray(), и теперь функция только возвращает завершенный массив, который на первый взгляд кажется более интуитивным.
• Что может быть не очевидным, так это то, что поскольку createClosureArray() вызывается только после создания только одной области для этой функции вместо одной для каждой итерации цикла.
• В этой функции переменная с именем index. Цикл запускается и добавляет функции массиву, возвращающему index. Обратите внимание, что index определяется внутри функции createClosureArray, которая только когда-либо вызывается один раз.
• Поскольку в функции createClosureArray() имеется только одна область, index привязана только к значению в пределах этого объема. Другими словами, каждый раз, когда цикл меняет значение index, он меняет его на все, что ссылается на него в пределах этой области.
• Все функции, добавленные в массив, возвращают переменную SAME index из родительской области, где она была определена вместо 10 различных из 10 различных областей, таких как первый пример. Конечным результатом является то, что все 10 функций возвращают одну и ту же переменную из той же области.
• После завершения цикла и index было изменено конечное значение 10, поэтому каждая функция, добавленная в массив, возвращается значение единственной переменной index, которая теперь установлена ​​в 10.

Результат

ЗАКРЫТЬ СДЕЛАНО ПРАВО n = 0 n = 1 n = 2 n = 3 n = 4 n = 5 n = 6 n = 7 n = 8 n = 9

ЗАКРЫВАЕТСЯ СОВЕРШЕННО n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10 n = 10

blockquote>