为什么我的方法不承认我的对象的成员?

问题描述 投票:2回答:1

我试图创建一个D3力图表中的“通用”类。当graphTick()函数被调用(或任何其他方法似乎...)类的成员值undefined好像方法不绑定到该实例。

我不知道如果我误解写一个类(我从C ++背景是),或者如果我滥用D3框架的JS方式。也许两者兼而有之?

我试图取代....

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

...通过:

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

但后来它看上去就像是从D3一些匿名对象调用,所以我想我的问题很可能是更多关于JS语法。

有一个Codepen设置这个类和快速测试:https://codepen.io/mrelemental/pen/VGLNLa

javascript class d3.js force-layout
1个回答
2
投票

您使用的是JavaScript类,这是在D3代码非常罕见。有一个在使用类本身没有问题,但你必须与this关键字时务请格外小心。

在你的代码的问题是,this函数内部graphTick的价值:在"tick"听众,this是仿真本身。按照API

如果调度了指定的事件,每个侦听将与作为模拟的this上下文中调用。

你可以很容易地看到它自己,如果你做的函数内部console.log(this)。你会得到:

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

这解释了为什么你都尝试没有成功:在两人面前,this是仿真本身。

解决方法很简单,只需传递正确的thisgraphTick功能:

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

© www.soinside.com 2019 - 2024. All rights reserved.