將參數傳遞給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
  } = {}){

...

}

這些是結構化的參數 ，因此該函數希望傳遞這樣的對象： { canvasID: " … ", labels: [ … ], data: " … ", noDataMessage: " … ", symbols: [ … ] } 。 它不指望多個參數被作為單獨的數值通過。

如果未傳遞任何參數，則使用具有給定默認值的空對象{} 。 由於字符串"cVacateDistribution"不具有canvasID ， labels ， data ， noDataMessage或symbols屬性，因此所有這些屬性都將是其默認值或undefined 。