Javascript 构造函数中的绑定与d3回调中的箭头函数+React

我现在正在使用D3V3的笔刷特性，遇到了构造函数中的绑定可以工作，但使用类函数却不行的情况。My.babelrc是为带有预设的类函数设置的：[flow，latest，stage-2，react]，我已经在代码的其余部分使用了箭头函数，所以这不是Transpiler的问题

有关守则：

    this.brush = d3.svg.brush()
        .x(xScale)
        .on("brushend", this.changeDates)

    const brushGroup = d3.select(this.node).append("g")
        .attr("class", "brush")
        .call(brush)

如果我像下面那样在构造函数中绑定变更日期，我会发现函数changeDates中的这个是React组件ExampleSVG，这是所需的行为

class ExampleSVG extends Component {
    constructor(props) {
        super(props)
        this.changeDates = this.changeDates.bind(this)
    }   

    changeDates() {
        console.log(this) //ExampleSVG {props: {...}, context: {...}}
    }

    ...d3 stuff
}

但是，如果我尝试通过arrow函数进行绑定，这将成为svg组的函数

class Example extends Component {
    changeDates = () => {
        console.log(this) //<g class="brush" ... />
    }

    ...d3 stuff
}

---

为什么arrow函数没有再次绑定，这不是一个透明问题，我的代码中有很多绑定箭头？也许我在这里遗漏了关于d3/的一些东西，但我想弄清楚这一点！是电话吗？在这种情况下，调用的作用是什么，这样它就可以覆盖箭头绑定？

箭头函数没有自己的绑定

对于传递给D3选择方法（如.attr、.on）的非箭头函数，D3使用function.apply将其设置为要修改的元素，这就是为什么它不是全局作用域为this的窗口，或者，如果不是this，则其作用域包括箭头函数的this

但是，由于arrow函数不能有自己的作用域，因此这将引用包含arrow函数的作用域

因此，与箭头函数相比，这在典型函数中是不同的。因此，为什么不应该在d3选择方法中使用fat arrow函数来要求您选择该元素，除非您使用另一种方法来选择该元素

发件人：

在arrow函数中，它保留封闭词法上下文的this值。在全局代码中，它将被设置为全局对象。。。这同样适用于在其他函数中创建的箭头函数：它们的箭头函数仍然是封闭词法上下文的箭头函数

---

但是，您当然可以保留arrow函数，并且仍然引用将是这个的元素，因为第二个参数是当前索引，第三个参数是选择中的元素数组。这已经说明了这种方法。

谢谢！我没有意识到关于箭头函数。为了确保我的说法正确，g.call调用了画笔函数，所以画笔上的粗箭头将取g的这个？虽然你的推理是正确的，但我认为你的答案没有抓住要点。看看我对这个问题的解释。我问这个问题的原因是因为我也做了d3.selectnode.appendrect.on'click'，=>{stuff}在React中，箭头函数取了React组件的this，不是d3，我相信这就是你在回答的后半部分所说的。事实上，胖箭头在画笔中没有返回相同的反应成分，这是令人惊讶的！您的问题具有误导性：您的语法错误，这使得问题本身无效。请看一看课程指南。不允许使用arrow函数声明方法。如果我把你的代码放在一个文件夹中，我会收到一个SyntaxError抱怨：。拿第二个例子来说，你只剩下第一个工作版本，这就产生了一个毫无意义的问题。对不起，冒号在我的代码中哪里？我的错！它抱怨=这是不允许的。此时不能进行任何赋值，因此不能赋值匿名箭头函数。刚刚意识到=在小提琴中也不起作用！我相信这就是React语法——React设置可以正常工作，所以我认为这不是语法问题，我的代码编译得很好。