为什么我的方法不能识别我的对象成员？

Question

我正在尝试为 D3 力图创建 "generic" class。当调用 graphTick() 函数（或任何其他方法似乎...）时，class 的成员值为 undefined，就好像该方法未绑定到该实例一样。

我想知道我是否误解了编写 class 的 JS 方式（我来自 C++ 背景），或者我是否滥用了 D3 框架。也许两者都有？

我试过替换....

simulation.on("tick", this.graphTick)

...来自：

simulation.on("tick", function(){ 
    /*graphTick implementation*/ 
})

但后来看起来它是由 D3 中的某个匿名对象调用的，所以我认为我的问题可能更多地与 JS 语法有关。

使用此 class 设置了 Codepen 并进行了快速测试：https://codepen.io/mrelemental/pen/VGLNLa

Answer 1

您正在使用 JavaScript class，这在 D3 代码中并不常见。使用 classes 本身没有问题，但在处理 this 关键字时必须格外小心。

您的代码中的问题是 graphTick 函数中 this 的值：在 "tick" 侦听器中，this 是模拟本身。根据 API:

When a specified event is dispatched, each listener will be invoked with the this context as the simulation.

如果在函数内部做一个console.log(this)，你自己很容易就能看到。你会得到：

{tick: function, restart: function, stop: function, nodes: function, etc...}

这就解释了为什么您的两次尝试都不起作用：在这两种尝试中，this 是模拟本身。

解决方法很简单，将正确的this传递给graphTick函数即可：

simulation.on("tick", this.graphTick.bind(this))

Why is my method not recognizing my object member?