JavaScript 作用域

Question

我有以下函数为 Highcharts 图表构造一个或多个 y 轴，尽管我的问题与 Highcharts API 几乎没有关系。

_constructYAxes: function(yAxes) {

    if (yAxes) {
        var highChartYAxes = [];

        for (var i = 0; i < yAxes.length; i++) {

            var kpiUnits = yAxes[i].units;

            var axisUnits = 'units ' + i;
            var axisLabel = 'label ' + i;

            // construct an Highcharts y-axis object
            var yAxis = {
                labels: {
                    formatter: function() {
                        return this.value + ' ' + axisUnits;
                    }
                },
                title: {
                    text: axisLabel
                },
            };
            highChartYAxes.push(yAxis);
        }
        // pass all the y-axes to the chart
        this.chartOpts.yAxis = highChartYAxes;
    }
}

问题是每个 y 轴使用相同的 label，即使 title 显示正确。这两者的区别在于前者是通过调用函数来计算

labels: {
    formatter: function() {
        return this.value + ' ' + axisUnits;
    }
},

因此，如果我有一个包含 3 个 y 轴的图表，标签“单位 2”会出现在所有图表上。

我认为问题在于 formatter 函数在循环的最后一次迭代中关闭了 axisUnits 的值，这样当函数被调用时(通过 Highcharts )，它每次都使用相同的 axisUnits 值。

我该怎么做才能强制函数在每次调用时都使用 axisUnits 的第 i 个值？

显然，我对 JavaScript 作用域的理解有些欠缺(我经常对 this 在不同上下文中的计算结果感到惊讶)。如果有人知道一些可以帮助我弄清楚这一点的好在线资源，请将它们发给我。

Answer 1

axisLabel 直接作为字符串传递，不会改变。

但是，axisUnits 是不 直接传递的。它仅在调用函数时获取。问题在于 for 循环不会创建新范围，因此对于所有迭代只有一个 axisUnits，这会导致所有标签具有相同的文本。

您可以通过创建一个闭包来解决这个问题。这样，字符串被直接传递并“卡住”了:

formatter: (function(x) { // x won't change
               return function() {
                   return this.value + ' ' + x;
               };
           })(axisUnits);