Javascript對象的變量undefined

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