javascript - 如何将一个类实例推送到另一个类的私有(private)数组中？

Question

我有一个类，如下所示:

class RoomUsageList {

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

}

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

还有一个函数文件(在另一个 javascript 文件中)，它将另一个类 (RoomUsage) 的实例传递给 RoomUsageList 类(上面)的 setter ，如下所示:

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 实例附加到私有(private) _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>