Question

我的教练要求我创建一个代表车辆的类和两个代表“救护车”和“公共汽车”的子类。我的HTML文件用于实例化每个子类，并允许我将其驱动通过发行方法。当我写这篇文章时，我的控制台中不断出现“未捕获范围”错误。

class Vehicle {
  constructor(color, direction, currentSpeed, topSpeed) {
      this.color = color; //string
      this.direction = direction; //integer 0-359 (representing a compass)
      this.currentSpeed = currentSpeed; //integer
      this.topSpeed = topSpeed; // integer
      this.engineStarted = true; //boolean
     }

//Methods:
  turnOn() {
    this.engineStarted = true;
  }
  info(){
    if(this.engineStarted){
      const info = `${this.color}, ${this.direction}, ${this.currentSpeed}, ${this.topSpeed}`;
      return info;
      } else {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate.";
      return status;
      }
    }
  statusOn(){
    if(this.engineStarted){
      const statusOn = "Engine Started, Vehicle Operational.";
      return statusOn;
    } else {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate.";
      return status;
    }
  }
  turnOff() {
    this.engineStarted = false;
  }
  info() {
    const status = "The Engine is now disengaged and vehicle is inactive."
    return status;
  }
  accelerate(){
    if(this.engineStarted = false){
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
    }
    if (this.currentSpeed < 100) {
      this.currentSpeed += 10;
      console.log("Accelerate speed is now: " + this.currentSpeed);
    } else {
      console.log("Top Speed Reached");
    } 
  }
  brake(){
    if(this.engineStarted = true){
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
    }
    if (this.currentSpeed > 10) {
      this.currentSpeed -= 10;
      console.log("Brake speed is now: " + this.currentSpeed);
    } else {
      this.currentSpeed = 0;
      console.log("Speed is now: " + this.currentSpeed);
    }
  }
  turnLeft(){
    if (this.engineStarted = true) {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
    }
    this.direction - 90;
    if (this.direction < 0) {
      this.direction + 90;
    }
  }
  turnRight(){
    if (this.engineStarted = true) {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
    }
    this.direction + 90;
    if (this.direction > 359) {
      this.direction - 90;
    }
  }
}

class Bus extends Vehicle {
  constructor(color, direction, currentSpeed, topSpeed, numberOfSeats) {
    super(color, direction, currentSpeed, topSpeed);
    this.numberOfSeats = numberOfSeats;
  }
  info() {
    if (this.engineStarted) {
      const info = `${this.color}, ${this.direction}, ${this.currentSpeed}, ${this.topSpeed}, ${this.numberOfSeats} seats`;
      return info;
      } else {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
      }
    }

    set numberOfSeats(newSeats) {
      if (newSeats < 50) {
        this.numberOfSeats = newSeats;
      } else {
        alert("Exceeded Seat Number");
      }
    }
  }

class Ambulance extends Vehicle {
  constructor(color, direction, currentSpeed, topSpeed, sirens) {
    super(color, direction, currentSpeed, topSpeed, sirens);
    this.sirens = sirens;
    
  }
    info() {
      if (this.engineStarted) {
        const info = `${this.color}. ${this.direction}, ${this.currentSpeed}, ${this.topSpeed}, Toggle ${this.sirens}`;
        return info;
      } else {
        const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
        return status;
      }
    }

    toggleSirens(){
    this.sirens = true;
    }
    set sirens(toggleSiren) {
      if (this.sirens){
        const info = "Sirens Activated";
        return info;
      } else {
        const status = "Sirens Inactive";
        return status;
      }
    }
}

<DOCTYPE html/>
<html>
  <head>
    <title>Vehicles</title>
  </head>
  <body>
    <script src="Johnson_ES6_Classes.js"></script>
    <script>
      let bus = new Bus("Yellow", 90, 45, 50, 45);
      let ambulance = new Ambulance("White", 180, 60, 65);

      alert(bus.info());
      alert(ambulance.info());
    </script>
  </body>
</html>

Bus.set numberOfSeats [as numberOfSeats]（Johnson_ES6_Classes.js：116）未捕获的RangeError：超出了最大调用堆栈大小

Answer 1

您在这里的二传手：

set numberOfSeats(newSeats) {
  if (newSeats < 50) {
    this.numberOfSeats = newSeats;
  } else {
    alert("Exceeded Seat Number");
  }
}

导致无限递归，使堆栈溢出。当您尝试设置this.numberOfSeats = newSeats时，它会再次调用setter并再次调用setter，直到堆栈溢出为止。

如果要进行setter设置，则需要创建一个不同的命名属性来存储没有setter的值。一种可能性是使用_numberOfSeats作为属性名称。

set numberOfSeats(newSeats) {
  if (newSeats < 50) {
    this._numberOfSeats = newSeats;
  } else {
    alert("Exceeded Seat Number");
  }
}

get numberOfSeats() {
    return this._numberOfSeats;
}

但是，您实际上并没有真正解释为什么要为此属性使用设置器，因此可能还有其他合适的解决方案。

Answer 2

就像@ jfriend00一样，您的设置程序存在无限循环。我认为可以采用其他解决方案。

class Bus extends Vehicle {
  constructor(color, direction, currentSpeed, topSpeed, numberOfSeats) {
    super(color, direction, currentSpeed, topSpeed);
    this.setseats(numberOfSeats);
  }
  info() {
    if (this.engineStarted) {
      const info = `${this.color}, ${this.direction}, ${this.currentSpeed}, ${this.topSpeed}, ${this.numberOfSeats} seats`;
      return info;
      } else {
      const status = "Engine has not been started! Vehicle is idle and inactive. Please activate";
      return status;
      }
    }

    setseats(newSeats){
        if (newSeats < 50) {
        this.numberOfSeats = newSeats;
      } else {
        alert("Exceeded Seat Number");
      }
    }

   }

我的代码中不断出现“未捕获范围”错误，我不知道为什么

2 个答案: