从 ES6 中的函数表达式访问类范围

Question

为了简化我的问题，我最初写了一个确实有效的问题。所以让我们假设我有这个在 ES6 类中使用 D3 的代码：

export default class MyClass{
    constructor(){
        this.radius = 1;
    }
    myFunc(){
        this.tooltip //defined elsewhere in the class don't worry about it
            .on('mouseover', function(){
                d3.select(this).transition()
                    .ease('elastic')
                    .duration('250')
                    .attr('r', this.radius*1.5);
                    //keyword this has now been overridden
            });
    }
}

但是我怎样才能实现上述功能，或者我应该采取不同的方法？

Answer 1

现在，看看新问题，这仍然与类无关。

但是我怎样才能实现所需的功能呢？

您不能让this 指向两个不同的事物，因此您必须至少为其中一个事物使用一个变量。 default var that = this approach 仍然运行良好：

myFunc(){
    var that = this;
    this.tooltip.on('mouseover', function(e){
         d3.select(this).transition()
            .ease('elastic')
            .duration('250')
            .attr('r', that.radius*1.5);
    });
}

（你也可以使用var radius = this.radius;，如果它在鼠标悬停事件之前不会改变）。

或者你使用event.currentTarget:

myFunc(){
    this.tooltip.on('mouseover', (e) => {
         d3.select(e.currentTarget).transition()
            .ease('elastic')
            .duration('250')
            .attr('r', this.radius*1.5);
    });
}

或者您甚至将两者结合起来，根本不使用this，因为它可能会混淆它所指的内容。

Answer 2

回复first revision of the question

您的事件处理程序中的this 与myFunc 方法中的this 相同，但这与类无关。回调是arrow function，仅此而已。 （您的代码中没有函数表达式）。

但是我怎样才能实现上述功能，或者我应该采取不同的方法？

您已经实现了所需的功能，不应该采取不同的方法。