Почему массив внутри класса становится Undefined?

Question

[700Hp]

Проблема в том, что при итерации массива он становится undefined и любой вызов консоль лога, за пределами итерации, до и после, показывает так же undefined.
Но если закомнтировать forEach, то он отображает массив.

Не работает:

export class DomListener {
  constructor($root, listeners) {
    if (!$root) {
      throw new Error('No $root provided for DomListener')
    }
    this.$root = $root
    this.listeners = listeners
  }

  initDomListeners() {
    console.log(this.listeners)
    this.listeners.forEach((listener) => {
      console.log(listener)
      // const method = 'on' + capitalize(listener)
      // console.log(method)
      // this.$root.on(listener, () => {})
    })
  }

  removeDomListeners() {}

Скриншо отладки


Вот так уже работает:

export class DomListener {
  constructor($root, listeners) {
    if (!$root) {
      throw new Error('No $root provided for DomListener')
    }
    this.$root = $root
    this.listeners = listeners
  }

  initDomListeners() {
    console.log(this.listeners)
    // this.listeners.forEach((listener) => {
    //   console.log(listener)
    //   const method = 'on' + capitalize(listener)
    //   console.log(method)
    //   this.$root.on(listener, () => {})
    // })
  }

  removeDomListeners() {}
}

Панель отладки:


В данный класс поступает несколько массивов, и в случае если он пустой, то передаёт undefined.
Соответсвенно работать должно только с не пустым массивом. При чём, что интересно, час назад этот код ещё работал.

Answer 1

[Алексей Уколов]

Вот так уже работает

Ну где же оно работает, если у вас 3 раза вывелось undefined и один раз массив? Просто вы перестаёте обращаться к несуществующему свойству и код не падает на первой же итерации. Однако никакой массив ничем не становится, такое значение туда и пришло. Ещё один вариант - this в момент исполнения указывает уже не на объект класса.

Если у вас может не быть массива, по условиям задачи, пишите, например, так:
(this.listeners || []).forEach(...)

Comments

[700Hp]

В данный класс, передаётся 4 массива. 3 из них изначально пустые.

Может так будет понятнее.

import {DomListener} from './DomListener'

export class ExcelComponent extends DomListener {
  constructor($root, options = {}) {
    super($root, options.listeners)
  }
  // Возвращает шаблон компонента
  toHTML() {
    return ``
  }

  init() {
    this.initDomListeners()
  }
}

Первый компонент

import {ExcelComponent} from '../../core/ExcelComponent'

export class Formula extends ExcelComponent {
  static className = 'excel__formula'

  constructor($root) {
    super($root, {
      name: 'Formula',
      listeners: ['input', 'click']
    })
  }

  toHTML() {
    return `
    <div class="info">fx</div>
     <div class="input" contenteditable="true" spellcheck="false"></div>
    `
  }
}

Второй компонент, таких ещё 2

import {ExcelComponent} from '../../core/ExcelComponent';

export class Header extends ExcelComponent {
  static className = 'excel__header'
  toHTML() {
    return `
    <input class="input" type="text" value="Новая таблица"/>

            <div>
                <div class="button">
                        <span class="material-icons">
                            delete
                        </span>
                </div>

                <div class="button">
                        <span class="material-icons">
                            exit_to_app
                        </span>
                </div>
            </div>
`
  }
}

[Алексей Уколов]

В данный класс, передаётся 4 массива. 3 из них изначально пустые.

Ну вот что вы опять такое пишете...

Во-первых, никакие четыре массива в класс не передаются - туда передаётся один аргумент в четырёх наследующих классах. Наследника четыре - аргумент один. Во-вторых, очевидно, что в трёх случаях не передаётся никакой "пустой массив", а передаётся "ничего", т.е. undefined.

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

[Алексей Уколов]

Решением же вашей задачи будет вот такая сигнатура конструктора:
constructor($root, listeners = []) {...}