Лексическая область действия функции обратного вызова

Question

Может ли кто-нибудь объяснить мне, почему startDate и endDate не находятся в области видимости в обратном вызове, переданном в функцию фильтра.

var events = [],
 eventsDataSource = [],
 statusChstatusChanges = [],
 statusChangesDataSource = [];

 function filterData() {
    var startDate = $('#start-date').data("kendoDatePicker").value();
    var endDate = $('#end-date').data("kendoDatePicker").value();

    events = eventsDataSource.filter(function (item) {
        debugger;
    });
    statusChanges = statusChangesDataSource.filter(function (item) {
        debugger;
    });
}

когда я изменил код на то, что ниже, это сработало. starDate и endDate находятся в области видимости. Разве лексическая область действия обратных вызовов / встроенных функций создается иначе, чем объявления функций?

function filterData() {
    var startDate = $('#start-date').data("kendoDatePicker").value();
    var endDate = $('#end-date').data("kendoDatePicker").value();

    function dateIsBetweenStartAndEnd(item) {            
        return new Date(item.Date) >= new Date(startDate) && new Date(item.Date) <= new Date(endDate);
    }

    events = eventsDataSource.filter(dateIsBetweenStartAndEnd);
    statusChanges =   statusChangesDataSource.filter(dateIsBetweenStartAndEnd);
}

Answer 1

Я вижу, у вас есть несколько отладочных операторов.

Возможно, вы используете инструменты разработки Chrome, и когда вы нажимаете на отладчик, вы не можете получить к нему доступ. startDate а также endDate,

Это просто оптимизация, которую выполняет браузер, потому что он не видит доступа к этим функциям в вашем коде.

Быстрый способ убедиться в этом - поместить консольный оператор над debugger заявление:

console.log(startDate);
debugger; // now you will be able to access startDate

Ваше понимание лексического контекста правильное... вы просто выполняете оптимизацию браузера во время выполнения.

Для получения дополнительной информации см. Этот отчет о проблеме Chrome.