无法从 d3.call() 调用组件中的方法

Question

我正在使用 D3 拖放链接，如下所示：

.call(d3.drag()
.on("start", linkDragStart)
.on("drag", linkDragging)
.on("end", linkDragEnd));

现在，我从方法内部删除了此函数，并将其本身作为单独的方法放置。所以我将上面的代码更改为：

.call(d3.drag()
.on("start", linkDragStart)
.on("drag", linkDragging)
.on("end", this.linkDragEnd));

正在调用该方法。问题是，当在linkDragEnd方法中使用 this 关键字时，它会被引用到调用该方法的 d3 路径。有解决方法吗？

Answer 1

有两种可能的解决方案。首先，正如注释中所建议的，是使用bind，即不是直接使用方法this.linkDragEnd，而是使用其绑定版本：

.call(d3.drag()
.on("start", linkDragStart)
.on("drag", linkDragging)
.on("end", this.linkDragEnd.bind(this));

另一种可能性是当你以现代JavaScript(至少ES6(或使用一些转译器(TypeScript，如标签所建议的那样，就足够了(。然后，您可以将此方法定义为属性，而不是 true 方法，其值为箭头函数：

linkDragEnd = (/* arguments here */) => {
/* function body here */
}

由于箭头函数具有不同的this行为，因此它们可以用作没有显式绑定的回调，只要它们引用创建它们的对象即可。