Как избежать "этой" проблемы в классе javascript? - PullRequest
Новая
       14

Как избежать "этой" проблемы в классе javascript?

0 голосов
/ 15 января 2020 
get_O3(e)
{
    e.preventDefault();

    let station = document.getElementById(e.target.id);

    let lon = station.getAttribute('lon');

    let lat = station.getAttribute('lat');

    let code_station = station.getAttribute('code');

    this.get_previsions(lon, lat, "O3").bind(this).then((data) => 
    {
        console.log(data);
    });
}

У меня проблема "this", когда я вызываю функцию get_previsions, я получаю ошибку: Uncaught TypeError: this.get_previsions не является функцией. Это может быть из-за параметра (e), потому что когда я делаю console.log (this), он возвращает цель. Я хотел бы, чтобы это == мой класс. Спасибо за помощь

Ответы [ 2 ]

0 голосов
/ 15 января 2020

Я предполагаю, что у вас есть класс, определенный как 

class thing {
  get_O3(e) { ... },
  get_previsions() { ... }
}

Есть несколько вариантов для вас. Первый вариант, вы можете привязать все функции к this в конструкторе: 

class thing {
  constructor () {
    this.get_03 = this.get03.bind(this);
    this.get_previsions = this.get_previsions.bind(this);
  }
  get_O3(e) { ... },
  get_previsions() { ... }
}

Это может быть неудобно, особенно если у вас много функций. Вы можете написать вспомогательную функцию bindAll, но менее неудобное / многословное решение - вместо этого использовать фабричный метод, минуя this в целом: 

function makeThing {
  const thing = {
    get_O3(e) {
      ...
      thing.get_previsions();
    },
    get_previsions() { ... }
  };
  return thing;
}

Eri c Elliot на Medium имеет хорошие чтения на топи c, если вы хотите получить более подробную информацию.

0 голосов
/ 15 января 2020

В любой данный момент вы можете проверить, на что указывает текущая ссылка this, выполнив 4 следующих правила:

  1. Новый : была ли функция вызвана с использованием new, тогда this указывает на новый экземпляр.
  2. Явное связывание : была ли функция вызвана с использованием Function#call, Function#apply или Function#bind
  3. Неявное связывание : Была ли функция вызвана ее владельцем? (т. е. owner.foo() или owner["bar"]())
  4. Правило по умолчанию : если не выполняется ни одно из других правил, тогда this устанавливается для объекта window, если сценарий выполняется в В противном случае режим "use strict" undefined.

Прослушиватели событий вызывают функцию с использованием явного связывания (callBack.call(target, ...)), поэтому ссылка this устанавливается для цели. Чтобы изменить ссылку this, вам нужно либо обернуть ее и вызвать ее неявно, либо использовать Function#bind.

Пример неявного вызова (+ закрытие): 

var something = {
  foo: function() {
    var self = this;
    addEventListener("click", function(e) {
      self.bar(e);
    });
  },
  bar: function() {

  }
};

Пример явного вызова ( Функция # связать): 

var something = {
  foo: function() {
    addEventListener("click", this.bar.bind(this));
  },
  bar: function() {

  }
};
...