Разрушение функции / метода ломает вещи в Firestore - Как?

Question

Просто играл с Firestore и все заработало.У меня был этот фрагмент:

this.db.collection('settings').onSnapshot(snapshot => {
  snapshot.forEach(doc => {
    this.cachedSettings[doc.id] = doc.data();
  });
});

Но как только я уничтожил данные, все сломалось.Был немного смущен тем, что происходило.Я предположил, что это как-то связано с привязкой this.

this.db.collection('settings').onSnapshot(snapshot => {
  snapshot.forEach(({ id, data }) => {
    this.cachedSettings[id] = data();
  });
});

Если у кого-то есть ссылки, это тоже хорошо.Я не мог найти один, так как я не знаю правильную формулировку для этой проблемы.Приветствия

Answer 1

Ах, нашел виновника. Это связано с природой this в JavaScript. Рассмотрим этот пример:

class Hello {
  constructor() {
    this.hello = "Hello";
  }

  returnString() {
    return this.hello;
  }
}

const { returnString } = new Hello();

console.log(returnString());

Это будет лог undefined. Зачем? - поскольку this здесь относится к самой функции returnString при ее деструктурировании, следовательно, undefined.

Однако это будет работать:

console.log(new Hello().returnString())

Чтобы первый фрагмент работал, нам нужно привязать returnString к классу, например:

class Hello {
  constructor() {
    this.hello = "Hello";
    this.returnString = this.returnString.bind(this);
  }

  returnString() {
    return this.hello;
  }
}

const { returnString } = new Hello();

console.log(returnString());

Надеюсь, это поможет будущим читателям:)