Почему мой метод не распознает член моего объекта?

Question

Я пытаюсь создать «общий» класс для графа сил 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

Answer 1

Вы используете класс 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