Question

我创建了一个包含方法Chart的对象redraw()。由于this内redraw()的上下文已从Chart对象更改为DOM元素，因此无法访问对象{{this.data}的属性（例如：Chart） 1}}。

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

尝试在灰色框周围拖动以触发redraw()

问题：如何从函数chart.data访问父对象chart.redraw？

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

在Javascript中从其方法引用Object

2 个答案: