在Javascript中引用對象的方法

Question

我創建了一個包含方法redraw()的對象Chart。因爲從redraw()內的this的上下文已從Chart對象更改爲DOM元素，所以我無法訪問對象Chart的屬性（例如：this.data）。

的jsfiddle：http://jsfiddle.net/a4tbG/1/

試着在灰色框拖拽到觸發redraw()

問題：如何從功能chart.redraw訪問父對象chart.data？

chart = new Chart(); 
chart.init(); 



function Chart() { 

    this.data = [1, 2, 3]; 

    this.init = function() { 
     var zoom = d3.behavior.zoom() 
      .on("zoom", this.redraw); 

     d3.select('#chart') 
      .append('svg:svg') 
      .attr('width', 300) 
      .attr('height', 300) 
      .call(zoom); 
    } 

    this.redraw = function() { 
     console.log(this); // Output the DOM element #chart svg. How do you access the object? 
     console.log(this.data); 
    } 

} 

Answer 1

使用bind確保回調調用正確的上下文。改變在其他一些變量此變量

.on("zoom", this.redraw); 

到

.on("zoom", this.redraw.bind(this)); 

Answer 2

存儲參考，然後用它。

chart = new Chart(); 
chart.init(); 


function Chart() { 

    this.data = [1, 2, 3]; 
    var $this=this; 
    this.init = function() { 
     var zoom = d3.behavior.zoom() 
      .on("zoom", $this.redraw); 

     d3.select('#chart') 
      .append('svg:svg') 
      .attr('width', 300) 
      .attr('height', 300) 
      .call(zoom); 
    } 

    this.redraw = function() { 
      // Output the DOM element #chart svg. How do you access the object? 
     console.log($this.data); 
    } 

} 

Demo