时间戳

首页 > 解决方案 > 为什么我的方法无法识别我的对象成员？

javascript - 为什么我的方法无法识别我的对象成员？

问题描述

我正在尝试为 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

标签： javascriptclassd3.jsforce-layout

解决方案

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

代码中的问题是函数this内部的值graphTick：在"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()： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

这是更新的代码：https ://codepen.io/anon/pen/qgpxNX?editors=0010

推荐阅读