コールバック関数のレキシカルスコープ

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 

あなたの理解が正しいです...あなただけのランタイムブラウザの最適化をヒットしています。

詳細については、this chrome issue reportを参照してください。