回调函数的词法作用域

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;
    });
}

当我将代码更改为以下内容时，它就起作用了。startDate和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);
}

- pawel.podsiadly

---

也许吧，但这只是猜测，可能是因为您先声明和分配了“events”（在“filterData”之外），然后在“filterData”中声明了“startDate”和“endDate”。这可能与变量提升有关？尝试在“filterData”函数内部声明使用“events”。 - Pimmol

Answer 1

我看到你在代码中使用了一些调试语句。

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

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

验证这一点的快速方法是在debugger语句之前放置一个控制台语句：

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

您对词法作用域的理解是正确的...您只是遇到了运行时浏览器优化问题。

更多信息，请参见此Chrome问题报告。

- Jonathan.Brink