JSFiddle - React, Tailwind, and code Playground

by fliptheweb

JavaScript

var i = 1;
var $q = {
    // Это называется IIFE http://benalman.com/news/2010/11/immediately-invoked-function-expression/
    // Те функция которая выполняется сразу же после создания
    // У вас происходит следующее:
    // 1. Создается временная функция, которая сразу выполняется
    // 2. функция возвращает значение i, которое присваивается $q[0] те в $q[0] уже не функция, а значение, возвращенное функцией те 1 (выполняется постинкремент)
    0: function() {
        return i++;
    }()
};

alert($q[0]);
alert($q[0]);

if ($q[0] === 1 && $q[0] === 2) { // Это никогда не сработает тк в $q[0] значени 1
    document.body.innerHtml = "It's true!";
}

// ----------------------------------------------------------------------------------
// Есть 2 способа как можно решить эту проблему. Старый ECMAScript 3 и новый из ES5
// [1] Мы убираем IIFE и вместо $q[0] делаем вызов фукнции $q[0]()

var i = 1;
var $q = {
    0: function() {
        return i++;
    } // <<< DIFF
};

alert($q[0]()); // 1
alert($q[0]()); // 2

if ($q[0] === 1 && $q[0] === 2) { // Это никогда не сработает тк в $q[0] сейчас функция
    document.body.innerHtml = "It's true!";
}

// ----------------------------------------------------------------------------------

// [2] Применяем getter из ES5 (работает далеко не во всех браузерах в ФФ норм)
// Теперь при обращении к $q[0] будет вызываться "ловушка" и будет возвращать значение, которое мы определим

var i = 1;
var $q = {
    get 0() { // Ловушка. Это синтаксис геттера из ES5. Геттер можно установить несколькими способами ещё один из них функция __defineGetter__(name, listener)
        return i++;
    }
};

alert($q[0]); // 1 как ожидали
alert($q[0]); // 2 как ожидали