Что происходит с объектом класса JS?

Question

[t800zippygod]

Всем доброго времени суток!
Возник такой серьезный вопрос, делаю chain-цепочку в JS. Из первого метода "add" возвращаю this, во втором мутирую состояние поля objects у this.
Так вот почему-то это поле мутирует еще до того, как был вызван второй метод.
Я может туплю где-то, но уже конкретно загнался, мб кто поможет :\

add(data) {
    switch(data.kind) {
      case 'Placemark':
        this.object = placemark(data)
        break
    }

    console.log(this)
    console.log('in add')
    return this
  }

  setInto(clasterName) {
    console.log(this)
    console.log('i am here')
    if(! this.objects[clasterName]) {
      this.objects[clasterName] = []
    }
    this.objects[clasterName].push(this.object)
  }

Это те самые два метода7
В консоль сначала выводится мутировавший инстанс, потом "in add", подтверждающий что находимся еще в первом методе. Уже потом выводятся логи из второго метода. Что за "магия"?

Вызов:

map.add({kind: 'Placemark'}).setInto('hrenSobachiy')

Comments

[smilingcheater]

Распечатывайте не console.log(this), а console.log(JSON.stringify(this)). Либо конкретное поле из this, this.object например

[smilingcheater]

Bavashi, console.log при выводе объекта выводит не его слепок на момент лога, а ссылку на объект, и реальные значения подставляет либо в момент разворачивания блока, либо просто после завершения обработки текущего события (на следующем тике?) я не особо силён в тонкостях процесса, но несколько раз с похожей проблемой сталкивался.

[smilingcheater]

Bavashi, https://codepen.io/smilingcheater/pen/rNLxJrY
посмотрите консоль
вызов console.log(JSON.stringify(this)); выводит незаполненное значение this.objects
вызов console.log(this); - выводит заполненное

т.е. проблема только в выводе в консоль, так ваш код работает корректно

[smilingcheater]

Bavashi, Внимательно перечитайте мой сообщение, после этого внимательно посмотрите вывод в консоли. Построчно сопоставьте, какая часть там выводится через console.log(this); , а какая через console.log(JSON.stringify(this));

1. первый метод, ничего не заполнено, console.log вызывается после внесения изменений. Скрин https://pasteboard.co/JvJK5Cn.png . В выведенном объекте Map уже заполнено поле objects, хотя в строковом представлении видно, что оно пустое.
2. второй метод, console.log до внесения изменения. Скрин https://pasteboard.co/JvJJCgK.png . То же самое.

Т.е. хоть где вы вызовите console.log(this); - увидите конечное состояние объекта
Если хотите видеть слепок на момент вызова - используйте другие методы вывода, например JSON.stringify
Я уже не знаю, как вам более доходчиво объяснить.

[smilingcheater]

Bavashi, https://pasteboard.co/JvJO6DS.png
раскрыл, что поменялось?
"хоть где вы вызовите console.log(this); - увидите конечное состояние объекта" всё ещё верно

[smilingcheater]

Bavashi, https://pasteboard.co/JvK5LsC.png
при выводы через console.log(this); в объекте всегда всё заполнено (видим конечное состояние)
при console.log(JSON.stringify(this)); видим реальное состояние объекта на момент логирования

абсолютно то же самое, что я до вас пытаюсь донести уже не первое сообщение