Почему код внутри промиса работает, хотя this там undefined?

Question

[johnymkp]

Привожу фрагмент класса, вопросы прямо в коде + пояснение к ним - после кода:

Фрагмент класса

export class Database {

  constructor(config) {
    this.config = config;
  }

  init() {
    return new Promise((resolve, reject) => {
      const dbname = this.config.dbname;  // 1) Почему this тут undefined?
      const version = this.config.version;  // 2) Почему, несмотря на это, dbname и version заполняются корректно?
      debugger;
      const openRequest = indexedDB.open(dbname, version);

      openRequest.onupgradeneeded = (event) => {
        debugger;
        this.database = openRequest.result;  // 3) Почему this тут IDBOpenDBRequest?
        this.createStorages();  // 4) Почему при этом вызывается метод createStorages() класса?
        resolve(true);
      }
    })
  }

  private createStorages() {
    debugger;
    this.config.storages.forEach(s => {
      if (!this.database.objectStoreNames.contains(s.name)) {
        this.database.createObjectStore(s.name, s.settings);
      }
    });
  }

  // Остальная часть класса
}

// Использование класса
const database = new Database(idbConfig);
database.init();

1) Не понимаю, почему здесь this получается undefined? Ведь в лямбдах this становится такой же, как this из внешнего блока в момент создания лямбды. Я вызываю метод init на экземпляре database, значит this в init указывает на этот экземпляр. Лямбда создается внутри init, перед тем как отправиться в промис, значит хотя бы на строчке `const dbname = this.config.dbname;` this должен указывать на экземпляр database. Но в консоли браузера отображается как undefined.
2) Несмотря на то, что this якобы undefined, переменные заполняются корректно. Т.е. как будто бы this все же указывает на экземпляр.
3) Здесь тоже не понятно, почему this получается IDBOpenDBRequest. Исходя из 1), this в промисовской лямбде должен указывать на экземпляр. Значит лямбда под событие onupgradeneeded берет this из внешней лямбды, а значит и в событийной лямбде this должен указывать на экземпляр.
4) Тем более не понятно, как может вызываться метод createStorages(), если this якобы указывает на IDBOpenDBRequest?

Answer 1

[Lynn «Кофеман»]

> 1) Почему this тут undefined?
Это неправда

Вы используете стрелочную функцию поэтому this тут будет такой же как в init, т.е. database.

> 3) Почему this тут IDBOpenDBRequest?
Опять же неправда

> 4) Почему при этом вызывается метод createStorages() класса?
См. выше

ПС возможно вы что-то не так или не туда смотрите в дебаггере

Comments

[johnymkp]

Да вот в том-то и дело, что я тоже себе верю и знаю что не может там быть undefined, но браузер жестко газлайтит, что я уж и сомневаться начал. Вот ссылка со скрином браузера.

[Lynn «Кофеман»]

johnymkp, какой-то глюк дебаггера

[Alexandroppolus]

Lynn «Кофеман»,

какой-то глюк дебаггера

вероятно, из-за сорсмапов. Там иногда чудеса творятся.

[johnymkp]

Вообще конечная проблема у меня с indexeddb связана. То, что описано у меня в посте, очень странно, но наверное это и правда чудит мишура, потому что в конечном итоге БД создается и хранилище тоже.

Я не нашел песочницу, где мог бы опубликовать пример с indexeddb, но вот я попытался вырезать кусок из программы и минимизировать его, чтобы он при этом самостоятельно запускался и не отвлекал лишними деталями:

Кусок кода

const idbConfig = {
  version: 1,
  dbname: 'stats123',
  storages: [
    {
      name: "constants123",
      settings: { }
    }
  ]
};

class Database {
  // config  <-- Это поля класса
  // database  <-- Тут должен храниться объект открытой БД.

  constructor(config) {
    this.config = config;
    this.database = "ololo";  // Просто для наглядности, что поле не перезапишется.
  }

  init() {
    return new Promise((resolve, reject) => {
      const openRequest = indexedDB.open(this.config.dbname, this.config.version);

      openRequest.onupgradeneeded = (event) => {
        this.database = openRequest.result; // a) Здесь предполагалось сохранить объект открытой БД, чтобы не переоткрывать каждый раз.
        this.createStorages();
        resolve(true);
      }
    })
  }

  createStorages() {
    this.config.storages.forEach(s => {
      if (!this.database.objectStoreNames.contains(s.name)) {
        this.database.createObjectStore(s.name, s.settings);
      }
    });
  }

  save(storage, data, key = null) {
    return new Promise((resolve, reject) => {
      const tx = this.database.transaction(storage, "readwrite");  // b) Ошибка вываливается тут, из-за this.database = "ololo", т.е. как будто не перезаписалось.
      const st = tx.objectStore(storage);
      if (key) {
        st.add(data, key);
      } else {
        st.add(data);
      }
      resolve(data);
    })
  }
}

class ConstantsService {
  storage = "constants";
  database;  // <-- Это поле не под саму БД indexeddb, а под экземпляр класса Database.
  requestConfig;

  constructor(database) {
    this.database = database;
  }

  async loadConstants() {
    const gameVersion = await this.loadGameVersion();
    await this.saveOrUpdateGameVersion(gameVersion);
  }

  async loadGameVersion() {
    return {
      id: 132, 
      name: "pathched", 
      releaseDate: 1722470400
    };
  }

  async saveOrUpdateGameVersion(gameVersion) {
    await this.database.save(this.storage, gameVersion, "gameVersion");
  }
}

const database = new Database(idbConfig);
database.init();
const cs = new ConstantsService(database);
cs.loadConstants();

Идея такая была: делаем класс под работу с БД, создаем его экземпляр (пуcть Foo). Запускаем инициализацию, которая заключается в создании \ открытии БД. При этом объект открытой БД сохраняем в поле экземпляра, чтобы не приходилось каждый раз открывать БД заново.
Всем другим объектам, которым в работе нужна БД, передаем Foo. В данном примере это работа с игровыми константами. Нужно сохранить константу - вызываем на Foo метод сохранения. Внутри Foo у нас уже открытая БД сохранена в поле database - так с ней и работаем, через это поле. Однако почему-то при заходе в метод save выясняется, что в this.database лежит "ololo", а не объект с открытой БД.

[johnymkp]

Разобрался. Оказалось две ошибки:
1) Концептуальная - сохранять объект indexeddb в событии onupgradeneeded это неправильно, потому что БД будет находиться в состоянии незавершенной транзакции обновления и не позволит сохранять в хранилище данные.
2) Техническая - я не дождался окончания промиса из метода init, из-за чего метод save по сути вызывался до того как в this.database реально попал объект открытой indexeddb.

Вот

исправленный код

const idbConfig = {
  version: 1,
  dbname: 'stats123',
  storages: [
    {
      name: "constants123",
      settings: { }
    }
  ]
};

class Database {
  // config
  // database  <-- Это поля класса

  constructor(config) {
    this.config = config;
  }

  init() {
    return new Promise((resolve, reject) => {
      const openRequest = indexedDB.open(this.config.dbname, this.config.version);

      openRequest.onupgradeneeded = (event) => {
        // Здесь нельзя перезаписывать this.database, потому что БД будет находиться в режиме незавершенной
        // upgrage-транзакции и все равно не позволит ничего в себя сохранить.
        const database = openRequest.result;
        this.createStorages(database);
      }

      openRequest.onsuccess = (event) => {
        // Перезаписывать this.database надо именно в этом событии, потому что зедсь транзакция обновления уже завершена
        // и БД готова к дальнейшей работе.
        // Это событие всегда вызывается после onupgradeneeded/
        this.database = openRequest.result;
        resolve(true);
      }
    })
  }

  createStorages(database) {
    this.config.storages.forEach(s => {
      if (!database.objectStoreNames.contains(s.name)) {
        database.createObjectStore(s.name, s.settings);
      }
    });
  }

  save(storage, data, key = null) {
    return new Promise((resolve, reject) => {
      const tx = this.database.transaction(storage, "readwrite");
      const st = tx.objectStore(storage);
      if (key) {
        st.add(data, key);
      } else {
        st.add(data);
      }
      resolve(data);
    })
  }
}

class ConstantsService {
  storage = "constants123";
  database;
  requestConfig;

  constructor(database) {
    this.database = database;
  }

  async loadConstants() {
    const gameVersion = await this.loadGameVersion();
    await this.saveOrUpdateGameVersion(gameVersion);
  }

  async loadGameVersion() {
    return {
      id: 132, 
      name: "pathched", 
      releaseDate: 1722470400
    };
  }

  async saveOrUpdateGameVersion(gameVersion) {
    await this.database.save(this.storage, gameVersion, "gameVersion");
  }
}


async function demo() {
  const database = new Database(idbConfig);
  // Тут надо было дождаться окончания промиса, иначе save вызывалось до того, как this.database успеет перезаписаться
  await database.init();
  const cs = new ConstantsService(database);
  cs.loadConstants();
}

demo();