Question

这是一个奇怪的问题 - 我在Chrome中调试了一些JavaScript代码，我发现当我将参数传递给类函数时，它们实际上并没有通过？奇怪的是，有时这段代码可以运行 - 有时它不会。

这是我所得到的（我已经删除了一些代码并删除了我认为不必要的内容）

<script type="text/javascript">
    $(document).ready(function () {
        var agentID = 'abcd-1234';
        var isCurrent = 'true';
        var colourUtilities = new ColorUtilities();
        var palette = colourUtilities.GeneratePalette(["#2c2656","#362d68","#3f3579","#483d8b","#51459d","#5a4dae","#6a5db8"]);

        GetData();

        function GetData() {
            var url = 'WebRequest.ashx?agentID=' + agentID + "&isCurrent=" + isCurrent;

            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                success: function (data) {
                    BuildCharts(data);
                },
                error: function (XMLHttpRequest, status, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

        function BuildCharts(data) {
            BuildSummaryBubbleChart(data);
        }

        function BuildSummaryBubbleChart(data) {
            var statusDistributionLabels = [];
            var statusDistributionCounts = [];

            for (var status in data) {
                statusDistributionLabels.push(status);
                statusDistributionCounts.push(data[status])
            }
            var chartBuilder = new ChartBuilder(palette, palette[0]);
            var canvasName = "cVacateDistribution";
            chartBuilder.BuildBubbleLineChart(canvasName, statusDistributionLabels, statusDistributionCounts, "No data available.");
        }
});

这一部分都能正常运行 - 正如您在Chrome中调试时所看到的，当我调用chartBuilder.BuildBubbleLineChart时，所有内容都有值： - 正如您所看到的，chartBuilder有一个值，canvasName变量有一个值并且正确传递，数组有值。

然而 - 继续调试，当我们跳转到BuildBubbleLineChart函数时，值都是未定义的：

我不能为我的生活找出错误的生活。这是ChartBuilder类的代码（缩减）：

function ChartBuilder(palette, mainColor) {
var thisBuilder = {};
var charts = [];

//Builds a horizontal chart of circles separated by lines with labels
thisBuilder.BuildBubbleLineChart = function ({
    canvasID,
    labels,
    data,
    noDataMessage = 'No data',
    symbols = null } = {}) {
    var canvas = document.getElementById(canvasID);

    if (canvas == undefined) {
        console.log('Error: (BuildBubbleLineChart) Your canvas could not be found');
        return;
    }

    thisBuilder.ClearChart(canvasID);

    var ctx = canvas.getContext('2d');
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;

    if (NoData(data)) {
        canvas.width = 200;
        FillNoDataText(ctx, noDataMessage, 100, canvasHeight / 2);
        PushCustomChart(canvasID);
        return;
    }

    //etc - goes on to build the chart
}

ChartBuilder类中还有其他一些函数，但在任何时候都没有调用/使用它们。

我的问题是，当我调用BuildBubbleLineChart函数并传递它的值时，它显然会进入函数并且没有值，因此它会记录错误Error: (BuildBubbleLineChart) Your canvas could not be found并返回。

非常感谢任何帮助！

Answer 1

仔细查看参数：

thisBuilder.BuildBubbleLineChart = function({
    canvasID,
    labels,
    data,
    noDataMessage = "No data",
    symbols = null
  } = {}){

...

这些是destructured parameters，因此函数需要传递这样的对象：{ canvasID: " ... ", labels: [ ... ], data: " ... ", noDataMessage: " ... {{1 }} ... ", symbols: [。不期望将多个参数作为单个值传递。

如果未传递任何参数，则使用具有给定默认值的空对象] }。由于字符串{}没有属性"cVacateDistribution"，canvasID，labels，data或noDataMessage，所有这些属性都将是他们的默认值或symbols。

将参数传递给JavaScript中的类函数

1 个答案: