Javascript 对象的变量未定义

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);
            };