Как это работает?
 

Всем привет!

Я не силен в JS, но так получилось, что играясь с ExtJS написал код, который работает =) Но теперь я не могу понять почему и как? =)

Вот непонятный мне кусок:

Ext.define('MHCalendar.view.CalendarGrid', {
    extend: 'Ext.panel.Panel',
    calendar: new Ext.calendar.panel.Month(),

    initComponent: function () {
        this.callParent();
        var calendar = this.calendar;

        var btnNext = new Ext.button.Button({
            text: '>',
            handler: function () {
                calendar.nextMonth();
            }
        });

        var btnPrev = new Ext.button.Button({
            text: '<',
            handler: function () {
                calendar.previousMonth();
            }
        });

        this.add(this.calendar, btnPrev, btnNext);
    }
});

Непонятность в том, каким образом засунув локальную переменную calendar в handler она продолжает существовать после инициализации и нормально отрабатывает при нажатии на кнопку?

Там как-то указатель остается или что? Поясните пожалуйста.

ПС: Я тут кое что лишнее убрал из кода, чтобы поменьше было. Кнопки на самом деле в отдельном контейнере добавляются.

Спасибо за ссылку! Интересно! =)

Никогда целенаправленно не изучал JS, но постоянно приходится сталкиваться и каждый раз открываю для себя что-то новое =)

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

И что, в JS все функции хранят в себе всю цепочку вызовов? Со всеми переменными окружения? :blink:

С ссылками на переменные, а не копиями, и каждая последующая функция только на предыдущее окружение, но в целом да, худшем случае это так. Однако на деле, если в функции у тебя ничего не eval'ится, всё лишнее и неиспользуемое не хранится и собирается GC. Всё оптимизировано.) Впрочем это уже детали реализации конкретных движков.

Ясно. Спасибо!

Немного приоткрыл мне глаза на JS.