javascript - JavaScript 中的对象歧义

Question

我有一些 JavaScript 在页面中多次加载。

var chart = new AmCharts.AmSerialChart();
...more with chart object...
        $( "#chartdiv${divId}" ).closest('#mainBox').find('#toggleTrendline').on('click',
                     function() {
                if(chart.trendLines==""){
                    chart.addTrendLine(trendLine)
                    }else{
                    chart.removeTrendLine(trendLine)
                        }
                chart.validateNow()
              });

在上面的代码中，它可以访问 chart 对象，因为此代码位于使用图表对象的同一脚本中。
但是这个脚本被加载多次，因为同一页面上有多个图表，并且所有图表的脚本都会有图表对象。
现在我的问题:
每当上述代码中的事件发生时，它都不知道要处理哪个 chart 对象 addTrendLine，因此它会在随机图表对象上调用 addTrendLine/removeTrendLine。
有道理吗？

我如何管理事物，以便每个事件处理程序仅处理相关图表对象上的事件。
任何人都可以提供帮助，提前致谢。

Answer 1

Whenever the event in code above happens it don't know what chart object to process addTrendLine so it calls addTrendLine/removeTrendLine on random chart object. Make sense?

不，事实并非如此。假设如图所示加载此代码(不在另一个函数内)，该事件将始终使用加载的 last chart 对象，因为 chart 是每次加载代码时都会覆盖全局变量。

How can i manage things such that every event handler will be handling event on related chart object only.

通过将该代码放入作用域函数中并让处理程序关闭其自己的 chart 副本:

(function () {
    var chart = new AmCharts.AmSerialChart();
    //...more with chart object...
    $("#chartdiv${divId}")
        .closest('#mainBox')
        .find('#toggleTrendline')
        .on('click',
            function () {
                if (chart.trendLines == "") {
                    chart.addTrendLine(trendLine)
                } else {
                    chart.removeTrendLine(trendLine)
                }
                chart.validateNow()
            }
        );
})();

现在，chart 是事件处理程序关闭的作用域函数内的局部变量。每个单元都是独立的。

当然，我只想指出您正在使用带有 id 的元素(例如 #mainBox)和 id 必须在页面上是唯一的，因此代码的多次加载之间会存在交互。可能有更好的方法来构建它，但上面的代码至少会满足您的要求，每次重复代码时都会为您提供一个单独的图表。