javascript - 在 JavaScript 中将参数传递给类函数

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:"..."，符号:[...] }。它不期望将多个参数作为单独的值传递。

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