回调函数的词法范围答案

【问题标题】：Lexical scope of callback function回调函数的词法范围
【发布时间】：2016-03-29 12:00:25
【问题描述】：

有人可以向我解释为什么 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);
}

【问题讨论】：

也许吧，但这只是一个猜测，这是因为您首先声明并分配了events（在filterData 之外），然后在filterData 中声明了startDate 和endDate。可能是吊装的问题？尝试在filterData 函数中声明您使用它的events

标签： javascript scope lexical-scope

【解决方案1】：

我看到你那里有一些调试器语句。

也许您正在使用 Chrome 的开发工具，当您点击调试器时，您无法访问 startDate 和 endDate。

这只是浏览器正在做的优化，因为它没有看到您的代码中对这些函数的任何访问。

验证这一点的快速方法是将控制台语句放在您的 debugger 语句上方：

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

您对词法范围的理解是正确的...您只是在进行运行时浏览器优化。

有关详细信息，请参阅this chrome issue report。

【讨论】：