Javascript：無法調用undefined方法

Question

這可能是一個常見的錯誤，但我找不到另一種方法。 我正在使用timeline.js創建一個顯示多個項目的timeline.js其中包含以下代碼

function createTimeline(){
        for(var length = data.section.length,i = 0; i < length; i++){
            var divWrapper = document.createElement("div");
            if(i != data.section.length - 1)
                divWrapper.setAttribute('class','timelineWrapper');
            $('body').append(divWrapper);
            layer[i] = new links.Timeline(divWrapper);
            links.events.addListener(layer[i], 'rangechange',
                function(){
                    var that = this;
                    var range = layer[i].getVisibleChartRange();
                    for (var j = 0; j < layer.length; j++){
                        if(j != i){
                            layer[j].setVisibleChartRange(range.start, range.end);
                        }
                    }
                }
            );
            layer[i].draw(data.section[i].project, options);   
        }
    }

它給出了錯誤Cannot call method 'getVisibleChartRange' of undefined 。 這里有什么問題？ 為什么layer [i]未定義？ 在事件范圍更改期間未檢測到它。

Answer 1

導致該問題是因為用作事件處理程序的未命名函數使用其父作用域的i變量。 在循環結束時，i == data.section.length在此范圍內。

這也是所有事件處理程序的i值。 因此，layer [i]未定義，這導致錯誤消息。

解決此問題的最簡單方法是創建一個函數構造函數，將i作為參數並返回一個新函數（您的處理程序）。 在此返回的處理程序的直接父級作用域中，i值將是您傳遞給functionBuilder函數的參數。

我今天晚些時候會發布一些代碼示例，只要我可以訪問一台電腦（我無法從平板電腦輸入：o））

編輯：我太慢了... mc10或多或少發布了我想發布的內容：o）

如果您不理解為什么這樣做，或者閉包，范圍或綁定意味着什么，這里有一個古老而完整的解釋： http ： //blog.niftysnippets.org/2008/02/closures-are-not-complicated。 HTML

Answer 2

您必須在閉包內綁定i以保存其addListener調用的值，因為稍后調用addListener的函數時， i將未定義。 嘗試使用以下代碼替換addListener調用的第三個參數：

(function(i) {
    return function() {
        var that = this;
        var range = layer[i].getVisibleChartRange();
        // Rest of code
    };
}(i)); // Anonymous function binds i in a closure