如何将一个类实例推入另一个类的私有数组中？

Question

我有一个如下所示的课程：

class RoomUsageList {

constructor()
{
    // private atributes
    this._roomList = [];

}

set roomList(newIns)
{
    this._roomList.push(newIns);
}
}

还有一个功能文件（在另一个javascript文件中），该文件将另一个类的实例（RoomUsage）传递给RoomUsageList类的设置者（如上），如下所示：

function saveTap()
{
// create a new class instance when the SAVE button
// is pushed.
let newAddress = document.getElementById('address').value;
let newRoomNo = document.getElementById('roomNumber').value;
let newLightSwitch = document.getElementById('lights').checked;
let newHeatCoolSwitch = document.getElementById('heatingCooling').checked;
let newSeatsUsed = document.getElementById('seatsUsed').value;
let newSeatsTotal = document.getElementById('seatsTotal').value;


let roomUsageIns = new RoomUsage();
roomUsageIns.address = newAddress;
roomUsageIns.roomNumber = newRoomNo;
roomUsageIns.lightsOn = newLightSwitch;
roomUsageIns.heatingCoolingOn = newHeatCoolSwitch;
roomUsageIns.seatsTotal = newSeatsTotal;
roomUsageIns.seatsUsed = newSeatsUsed;

// add the above-created class instance into the RoomUsageList class

let roomUsageList = new RoomUsageList(roomUsageIns);
roomUsageList.roomList = roomUsageIns;

console.log(roomUsageList);

}

输出仅包含一个实例，不推送新的RoomUsage实例。为什么呢？ 我是编程新手，任何帮助都很棒！

输出：

Answer 1

问题在于，每次调用saveTap函数时，您都在创建一个新的RoomUsageList实例。这会将_roomList重置为[]。

如果您在函数外部调用roomUsageList = new RoomUsageList()，则setter应该会按预期工作，并将新的RoomUsage实例附加到私有_roomList属性。

编辑：错字 EDIT2：在代码段中删除了多余的控制台日志

class RoomUsage {
  constructor () {
    //
  }  
}

class RoomUsageList {
  constructor () {
    // private attributes
    this._roomList = [];
  }

  set roomList(newIns) {
    const roomList = [...this._roomList, newIns];
    this._roomList = roomList
  }
}

// Create global state
const roomUsageList = new RoomUsageList();

function onFormSubmit (event) {
  event.preventDefault();

  // create a new class instance when the SAVE button
  // is pushed.
  let newAddress = document.querySelector('.address').value;
  let newRoomNo = document.querySelector('.roomNumber').value;
  let newLightSwitch = document.querySelector('.lights').checked;
  let newHeatCoolSwitch = document.querySelector('.heatingCooling').checked;
  let newSeatsUsed = document.querySelector('.seatsUsed').value;
  let newSeatsTotal = document.querySelector('.seatsTotal').value;

  let roomUsageIns = new RoomUsage();
  roomUsageIns.address = newAddress;
  roomUsageIns.roomNumber = newRoomNo;
  roomUsageIns.lightsOn = newLightSwitch;
  roomUsageIns.heatingCoolingOn = newHeatCoolSwitch;
  roomUsageIns.seatsTotal = newSeatsTotal;
  roomUsageIns.seatsUsed = newSeatsUsed;

  // add the above-created class instance into the RoomUsageList class
  
  roomUsageList.roomList = roomUsageIns;

  console.log(roomUsageList);
}

<form onsubmit="onFormSubmit(event)">
  
  <div>
    <label>Address</label>
    <input type="text" class="address">    
  </div>

  <div>
    <label>Room Number</label>
    <input type="text" class="roomNumber">    
  </div>

  <div>    
    <label>Lights</label>
    <input type="text" class="lights">
  </div>

  <div>    
    <label>
      <input type="checkbox" class="heatingCooling">
      Heating/Cooling
    </label>
  </div>

  <div>    
    <label>Seats Used</label>
    <input type="text" class="seatsUsed">
  </div>

  <div>    
    <label>Seats Total</label>
    <input type="text" class="seatsTotal">
  </div>

  <button type="submit">Save</button>
</form>

Answer 2

您应仅将setter用于设置整个列表，而不要附加项目-为此，您可以创建单独的方法，例如addItem用于附加单个项目，或addItems可以插入更多内容而不是将一个intem放入数组

class RoomUsageList {

  constructor() {
    this._roomList = [];
  }

  set roomList(roomList) {
    this._roomList = roomList;
  }

  addItem(item) {
    this._roomList.push(item);
  }

  addItems(items) {
    this._roomList.concat(items);
  }
}

很好找到了解决方案-每次调用函数时，都会创建一个新实例：）

Answer 3

感谢您的帮助，通过稍微调整代码，程序可以完美运行。这就是我所做的：

//Room Usage List Class
//---------------------
//
class RoomUsageList {

constructor()
{
    // private atributes
    this._roomList = [];

}

set roomList(newIns)
{
    // pushes new array into parent class instance
    this._roomList.push(newIns);
}  
}

//making the parent class instance global
const roomUsageList = new RoomUsageList();

function saveTap()
{
// create a new class instance when the SAVE button
// is pushed.
let newAddress = document.getElementById('address').value;
let newRoomNo = document.getElementById('roomNumber').value;
let newLightSwitch = document.getElementById('lights').checked;
let newHeatCoolSwitch = document.getElementById('heatingCooling').checked;
let newSeatsUsed = document.getElementById('seatsUsed').value;
let newSeatsTotal = document.getElementById('seatsTotal').value;

let roomUsageIns = new RoomUsage();
roomUsageIns.address = newAddress;
roomUsageIns.roomNumber = newRoomNo;
roomUsageIns.lightsOn = newLightSwitch;
roomUsageIns.heatingCoolingOn = newHeatCoolSwitch;
roomUsageIns.seatsTotal = newSeatsTotal;
roomUsageIns.seatsUsed = newSeatsUsed;

// add the above created class instance into the RoomUsageList class
roomUsageList.roomList = roomUsageIns;
console.log(roomUsageList);

}