Question

我已经创建了一个javascript对象作为我正在处理的可视化的一部分，并且正在讨论对象的实例变量的问题。相关代码如下：

function bubble() {
        //don't use these functions elsewhere--only modify them to change behavior
            this.color;
            this.bubbleCircles = chart.selectAll("circle");
                //.data(array,function(d){return d['date'];});

            this.bubbleCirclesEnter = function(selection){
                selection.enter().append("circle")
                    .style('stroke',this.color)
                    .style('fill',this.color)
                    .attr("cx", function (d, i) { return x(i); })
                    .attr("cy", function (d) { return y(d["measure"]) - 1.5*bubbleRadius; })
                    .attr("r", 0);
                    console.log(this.color);
                };

            this.bubbleCirclesEnterTransition = function(selection){
                return selection.transition()
                    .duration(400)
                    .delay(function(d,i){return i*segmentDuration;})
                    .ease('elastic')
                    .attr("r", bubbleRadius);
                };

            this.bubbleText = chart.selectAll('.label');
                //.data(array,function(d){return d['date'];});

            this.bubbleTextEnter = function(selection){
                selection
                    .enter().append("text")
                    .attr("x", function (d, i) { return x(i) - (13.0/16)*bubbleNumberSize; })
                    .attr("y", function (d, i) { return y(d['measure']) - 1.5*bubbleRadius + bubbleNumberSize*(5.0/16); })
                    .style("font-size", bubbleNumberSize.toString() + "px")
                    .style('fill',white)
                    .style('fill-opacity',1.0)
                    .style('stroke',white)
                    .style('stroke-opacity',1.0)
                    .text(function (d, i) { return d['measure'].toFixed(2); });
            };
        //actually use these ones

            this.enter = function() {
                this.bubbleCircles = this.bubbleCircles.call(this.bubbleCirclesEnter);
                this.bubbleText = this.bubbleText.call(this.bubbleTextEnter);
            };

            this.enterTransition = function() {
                this.bubbleCircles.call(this.bubbleCirclesEnterTransition);
            };

            this.draw = function() {
                this.enter();
                this.enterTransition();
            };

            this.setData = function(dataSet) {
                this.bubbleCircles = this.bubbleCircles.data(dataSet,function(d){ return d['date']; });
                this.bubbleText = this.bubbleText.data(dataSet,function(d){ return d['date']; });
            };

            this.setColor = function(bubblesColor) {
                this.color = bubblesColor;
            };
        };

问题在于this.color变量。它在调用'setColor'方法时被设置，但是，稍后，当调用bubbleCirclesEnter时（通过this.draw和this.enter），变量的console.log显示它未定义。

如果有人能指出我做错了什么，我真的很感激！

Answer 1

this更改整个对象的范围。当您输入任何函数时，this的范围将从全局范围移动到函数的本地范围。一般来说，我所看到的是设置一个与此相等的新变量作为另一个成员。本文用更好的词语解释：http://ryanmorr.com/understanding-scope-and-context-in-javascript/

function bubble() {
    //don't use these functions elsewhere--only modify them to change behavior
        this.color;
        this.bubbleCircles = chart.selectAll("circle");
        var me = this;

。。

this.bubbleCirclesEnter = function(selection){
            selection.enter().append("circle")
                .style('stroke',me.color)
                .style('fill',me.color)
                .attr("cx", function (d, i) { return x(i); })
                .attr("cy", function (d) { return y(d["measure"]) - 1.5*bubbleRadius; })
                .attr("r", 0);
                console.log(me.color);
            };

Answer 2

只是一个想法：

尝试在函数中声明颜色变量：

function bubble() {
        //don't use these functions elsewhere--only modify them to change behavior
            var color = "";
   //rest of the code

Javascript对象的变量未定义

2 个答案: