Question

sap.ui.core.Control.extend("control.linechart", { 
    /* the control API */
    metadata : {
        properties : {
            "items" : { type: "any" },
            "height" : {type: "int"},
            "width" : {type: "int"},
            "popup" : {type: "any"}
        },
        events: {
            "select" : {},
                "selectEnd": {}             
            }           
        },

        // the part creating the HTML:
        renderer : function(oRm, oControl) {    // static function, so use the given "oControl" instance instead of "this" in the renderer function
            oRm.write("<div"); 
            oRm.writeControlData(oControl);     // writes the Control ID and enables event handling - important!
            oRm.addClass("lineChart");              // add a CSS class for styles common to all control instances
            oRm.writeClasses();                 // this call writes the above class plus enables support for my.Bubble.addStyleClass(...)               
            oRm.write(">");
            oRm.write("</div>");
        },  
        onAfterRendering: function() {
            data = this.getItems();
                //alert(JSON.stringify(this.getItems()));
                var passedheight = this.getHeight();
                //var containerWidth = jQuery.sap.byId(this.oParent.sId).width() || 800; // gets super parent width
                var containerWidth = $("#"+this.getId()).parent().width(); // gets immediate parent width
                var margin = {top: 15, right: 30, bottom: 20, left: 30},
                width = containerWidth- margin.left - margin.right,
                 height = passedheight - margin.top - margin.bottom;

                var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;

                var x = d3.time.scale().range([0, width]);

                var y = d3.scale.linear()
                    .range([height, 0]);

                var color = d3.scale.category10();

                var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");

                var yAxis = d3.svg.axis()
                    .scale(y)
                    .orient("left").ticks(4).tickSize(-width, 0, 0);

                var line = d3.svg.line()
                    .x(function(d) { return x(d.date); })
                    .y(function(d) { return y(d.tonneValue); });

                var svg = d3.select("#"+this.getId()).append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

                color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

                data.forEach(function(d) {
                    d.date = parseDate(d.date);
                });

                var wsfs = color.domain().map(function(name) {
                    return {
                        name: name,
                        values: data.map(function(d) {
                            return {date: d.date, tonneValue: +d[name]};
                        })
                    };
                });

                x.domain(d3.extent(data, function(d) { return d.date; }));

                y.domain([
                    d3.min(wsfs, function(c) { return d3.min(c.values, function(v) { return v.tonneValue; }); }),
                    d3.max(wsfs, function(c) { return d3.max(c.values, function(v) { return v.tonneValue; }); })
                ]);

                svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

                svg.append("g")
                    .attr("class", "y axis")
                    .call(yAxis);

                var wsf = svg.selectAll(".wsf")
                    .data(wsfs)
                    .enter().append("g")
                    .attr("class", "wsf");

                wsf.append("path")
                    .attr("class", "line")
                    .attr("d", function(d) { return line(d.values); })
                    .style("stroke", function(d) { return color(d.name); });

                var legendNames = d3.keys(data[0]).filter(function(key) { return key !== "date" });

                data.forEach(function(d) {
                    d.ages = legendNames.map(function(name) { return {name: name, value: +d[name]}; });
                });
                var legend = svg.selectAll(".legend")
                    .data(legendNames.slice())
                    .enter().append("g")
                    .attr("class", "legend")
                    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

                legend.append("rect")
                    .attr("x", width - 18)
                    .attr("width", 18)
                    .attr("height", 4)
                    .style("fill", function(d) {return color(d); });

                legend.append("text")
                    .attr("x", width - 24)
                    .attr("y", 6)
                    .attr("dy", ".35em")
                    .style("text-anchor", "end")
                    .text(function(d) {  return d; });
                },
});

在整个程序中，为什么右侧值会发生变化，即当我data = this.getItems();时，我认为this.getItems已分配给data。但是数据在程序的其余部分被操纵，但是当再次调用oAfterRendering时，我得到变量data中的操纵数据。当this.getItems() i.e. items property是被操纵的那个时，如何操纵data。由于使用Openui5和自定义控件，无法将数据保存在某个临时变量中。

Answer 1

当您从函数返回一个对象时，JavaScript不会复制该对象，而是返回对它的引用（类似于C中的指针）。

这意味着如果它被修改，它将反映在指向它的所有变量中。

这与数组和其他对象的行为相同。

要避免的任何事情。

您可以返回对象的clone。根据您的对象的复杂程度，可能需要进行深度克隆。请记住，这不应该经常进行，因为它可能会影响性能。

在ES6中创建浅层克隆（实际上只是复制属性，克隆任何对象在JavaScript中更细微）的简单方法是......

var cloned = Object.assign({}, objectToBeCloned);

RHS分配操纵LHS操纵

1 个答案: