为什么我的方法无法识别我的对象成员？答案

【问题标题】：Why is my method not recognizing my object member?为什么我的方法无法识别我的对象成员？
【发布时间】：2019-07-02 00:43:01
【问题描述】：

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

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

我已经尝试替换....

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

...作者：

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

但是看起来它是由 D3 中的某个异常对象调用的，所以我认为我的问题可能更多是关于 JS 语法。

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

【问题讨论】：

【解决方案1】：

您正在使用 JavaScript 类，这在 D3 代码中非常少见。使用类本身没有问题，但在处理this 关键字时要格外小心。

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

当指定事件被调度时，每个侦听器都会被调用，并使用this 上下文作为模拟。

如果您在函数内部执行console.log(this)，您可以很容易地看到它。你会得到：

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

这就解释了为什么你的两次尝试都没有成功：在这两种情况下，this 就是模拟本身。

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

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

【讨论】：

哇...好吧！所以bind() 将graphTick 的this“锁定”到这个特定的类实例？是否存在静态绑定到类，然后当我有两个或更多 Graph 时出现问题的风险？
@VincentDM 我认为这不会发生……您可以创建一个包含 2 个或更多实例的简单代码，以检查这种可能的风险。不管怎样，如果这个问题确实出现了，至少现在你知道原因了，所以你可以考虑其他方法来解决它。