JavaScript菜单对象计算价格报ReferenceError及getter/setter问题咨询

报错问题解决 #

你遇到的ReferenceError: appetizers is not defined错误以及后续潜在的其他运行错误，来自两个代码问题：

• 变量名拼写不一致：你在generateRandomMeal方法中定义前菜变量时用的是单数appetizer，但后续计算总价、拼接返回字符串时用的是复数appetizers，访问了未声明的变量因此抛出引用错误。
• getRandomDishFromCourse方法缺少返回值：你计算出随机下标后没有返回对应位置的菜品对象，方法默认返回undefined，后续调用.price属性时会触发新的类型错误。需要在方法末尾补充return dishes[randomIndex];。

getter/setter定义位置的影响 #

你当前使用的是对象字面量写法，getter、setter的排列顺序不会影响代码功能。对象字面量的所有属性（包括访问器属性）是一次性初始化完成的，只要在同一个对象内部定义，不管排列顺序如何，调用时都可以正常访问。
如果使用class类语法定义，类的访问器、普通方法的定义顺序同样不会影响功能，仅和实际调用的时机有关。

修复后的完整代码 #

const menu = {
  _courses: {
    appetizers: [],
    mains: [],
    desserts: [],
  },
  get appetizers() {
    return this._courses.appetizers;
  },
  set appetizers(appetizers) {
    this._courses.appetizers = appetizers;
  },
  get mains() {
    return this._courses.mains;
  },
  set mains(mains) {
    this._courses.mains = mains;
  },
  get desserts() {
    return this._courses.desserts;
  },
  set desserts(desserts) {
    this._courses.desserts = desserts;
  },
  get courses() {
    return {
      appetizers: this.appetizers,
      mains: this.mains,
      desserts: this.desserts,
    };
  },
  getRandomDishFromCourse(courseName) {
    const dishes = this._courses[courseName];
    const randomIndex = Math.floor(Math.random() * dishes.length);
    // 补充返回值
    return dishes[randomIndex];
  },
  addDishToCourse(courseName, dishName, dishPrice) {
    const dish = {
      name: dishName,
      price: dishPrice,
    };
    this._courses[courseName].push(dish);
  },
  generateRandomMeal() {
    // 变量名统一为复数
    const appetizers = this.getRandomDishFromCourse('appetizers');
    const mains = this.getRandomDishFromCourse('mains');
    const desserts = this.getRandomDishFromCourse('desserts');
    const totalPrice = appetizers.price + mains.price + desserts.price;
    return `Your meal is ${appetizers.name}, ${mains.name}, ${desserts.name}. The total price is ${totalPrice}.`;
  }
};

menu.addDishToCourse('appetizers', 'Caesar Salad', 9);
menu.addDishToCourse('appetizers', 'Octopus', 18);
menu.addDishToCourse('appetizers', 'Scallop and Lobster Stuffed Crepe', 22);

menu.addDishToCourse('mains', 'Berkshire Porkchop', 45);
menu.addDishToCourse('mains', 'Filet Mignon', 43);
menu.addDishToCourse('mains', 'Spicy Lobster Pasta', 47);

menu.addDishToCourse('desserts', 'Deconstructed Mud Pie', 18);
menu.addDishToCourse('desserts', 'Creme Brulee', 14);
menu.addDishToCourse('desserts', 'Cheesecake', 18);

const meal = menu.generateRandomMeal();
console.log(meal);

内容的提问来源于stack exchange，提问作者Zach Davis