Создание x количества новых объектов в конструкторе классов с помощью цикла for и последующее изменение их в JavaScript

Question

Я пытаюсь создать x количество новых котят () в конструкторе класса Дом и сохраняю их в объекте объектов this.kittens . Но когда я позже пытаюсь изменить этот объект объектов, ничего не происходит, или я получаю неопределенный. Однако я могу изменить другое свойство / объект House или, более конкретно, дочерний класс Playroom без каких-либо проблем ( this.exampleKitten ), который "был создан"как обычно".

Я понимаю, что конструктор House создает новый объект котят каждый раз, когда он вызывается, однако я хотел бы, чтобы он вел себя так же, как exampleKitten, то есть после его создания я хотел бы иметь возможностьизменить его содержимое. Как мне этого добиться? Разве это плохая практика - создавать и хранить x новых объектов в конструкторе, как я?

Надеюсь, вы понимаете мой вопрос! Заранее спасибо!

class House {
  constructor (numberOfKittens) {
    this.numberOfKittens = numberOfKittens
    this.kittens = function () {
         const kitts = {}
          for (let i = 0; i < this.numberOfKittens; i++) {
            kitts[i] = new Kitten(`Kitten ${i}`)
          }
         return kitts
        }
   this.exampleKitten = {7: {name: "Jenny", favoriteToy: "dog"}}
   }

}

class Playroom extends House {
  constructor (numberOfKittens, kittens, exampleKitten) {
    super(numberOfKittens, kittens, exampleKitten)
  }
}

class Kitten {
  constructor (name, favoriteToy) {
    this.name = name
    this.favoriteToy = favoriteToy
    } 
}

let p = new Playroom(15)

p.kittens()[0].name = "Does not work"
p.exampleKitten[7].name = "This does work"

Answer 1

Я думаю, вы, возможно, немного запутались в том, как / когда ваши котята рождаются и как вы с ними взаимодействуете.

Самый простой способ настроить это - создать функцию, которая будет генерировать ваших котят. Кроме того, добавьте еще одно свойство, которое содержит котят.

Учитывая приведенную ниже настройку, как только вы "обновите" Playroom, он сгенерирует это количество котят и установит kittens свойство к набору данных.

После этого вы можете взаимодействовать с котятами по индексу, обратившись к свойству kittens. т.е. Playroom.kittens[<index>].<property>

class House {
  constructor(numberOfKittens) {
    this.numberOfKittens = numberOfKittens
    this.kittens = this.makeKittens(); // <-- Set a property for your kittens to live
    this.exampleKitten = {
      7: {
        name: "Jenny",
        favoriteToy: "dog"
      }
    }
  }
  makeKittens() { // Make a function that generates your kittens
    const kitts = {};
    for (let i = 0; i < this.numberOfKittens; i++) {
      kitts[i] = new Kitten(`Kitten ${i}`);
    }
    return kitts;
  }
}

class Playroom extends House {
  constructor(numberOfKittens, kittens, exampleKitten) {
    super(numberOfKittens, kittens, exampleKitten)
  }
}

class Kitten {
  constructor(name, favoriteToy) {
    this.name = name
    this.favoriteToy = favoriteToy
  }
}

let p = new Playroom(15)

// p.makeKittens()[0].name = "Does not work"
// p.exampleKitten[7].name = "This does work"

console.log('Kitten Playroom', p);
console.log('First Kitten Name', p.kittens[0].name);
console.log('Updating First Kitten Name to "Frank"');
p.kittens[0].name = 'Frank';
console.log('First Kitten Name', p.kittens[0].name);

Я бы также предложил обновить любой kittens по индексу, так как он не читается и подвержен ошибкам (индекс выходит за пределы диапазона, отключается на единицу и т. Д ... )

Я бы предложил добавить функцию, подобную этой:

updateKitten(idx, name) { // Or whatever you're wanting to update
    const kitten = this.kittens[idx];
    if (kitten) {
        kitten.name = name;
      return kitten;
    }
    throw new Error(`No kitten at index ${idx}`); // or return null or however you want to handle it
  }

Answer 2

Таким образом, метод kittens() фактически возвращает объект, но он не назначает этот объект как новое значение kittens. У вас есть фабрика, и вы можете использовать ее для создания отдельных экземпляров, если хотите.

const house = new House()
const kittens1 = house.kittens()
const kittens2 = house.kittens()

kittens1[0] = oldKitten

kittens2[0] = newKitten

kittens1[0] // still oldKitten

Если вы хотите управлять только одним экземпляром за раз на домашнем объекте, я бы переименовал вашметод addKittens() или что-то еще, и результат присваивается this.kittens. Кроме того, я бы использовал собственный массив вместо объекта с индексами в качестве ключей. Это позволит вам использовать все мощные методы массива, которые предлагает js.

class House {

  constructor() {
    this.kittens = []
  }

  addKittens(numOfKittens) {
    for (let i = 0; i < numOfKittens; i++) {
      const newKitten = new Kitten(`Kitten ${i}`)
      this.kittens.push(newKitten)
    }
  }

}