在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