Функции не распознают переменные

Question

Несколько дней назад я обнаружил prototypejs, когда захотел создать класс в JavaScript. я имел некоторые функции, которые работали отлично, нарисовать профиль следующим образом: My Race Profile

Чтобы создать этот профиль с любыми данными, я хотел создать полный класс.

Вот мой код на codepen.

Итак, чтобы объяснить мою проблему:

Я объявленную мои переменные в моем конструкторе. Когда я использую var rp = new RaceProfile('data.json', 'markers.json');, у меня нет никаких проблем. Все мои переменные создаются с хорошими значениями.

Но, когда я использую «rp.profile(data);», все переменные, объявленные ранее, не определены. Кажется, все значения, определенные ранее, стираются. Из-за этого мой код не может работать.

Если кто-то знает, где проблема пришел, дайте мне знать тоже :)

Answer 1

Когда вы сказали «все переменные», вы говорите о «XScale», «yScale» ...? Поскольку эти переменные недоступны в функции профиля, действительно переменная «var» видна только в текущей области (между {}).

Чтобы получить доступ к переменной в функции класса вы должны использовать «это» ключевое слово, как для поля dataProfile:

var RaceProfile = Class.create({ 
initialize: function (dataProfile, dataCP) { 
    this.dataProfile = dataProfile; 
    this.dataCP = dataCP; 
    this.xScale = d3.scaleLinear(); 
} 

Теперь вы можете получить доступ к этим переменным в других функциях.

Morever в JS, по умолчанию «это» контекстная ключевое слово, чтобы узнать больше об этом: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

«это» доля через все функции объекта, но анонимные функции имеют свои собственные это (анонимные функции Арен» t присоединяется к вашему объекту).

Так что это не может работать, вы не можете получить доступ к XScale напрямую:

profile: function (rawData) { 
    d3.json(this.dataProfile, function (error, rawData) { 
     // .. 
     this.xScale.range([0, width]).domain(d3.extent(data, function (d) { 
      return d.distance; 
     })); 

Вы должны сохранить «этот» вашего объекта в переменной:

profile: function (rawData) { 
    var self = this; 

    d3.json(this.dataProfile, function (error, rawData) { 
     // .. 
     self.xScale.range([0, width]).domain(d3.extent(data, function (d) { 
      return d.distance; 
     }));