为什么我的 getter/setter 方法没有按预期工作 - 怀疑这与“this”有关

Question

if someone could explain why the getter method in this code is returning undefined, that would be appreciated. I figured it might be something to do with the 'this' context. Is the this.appetizers returning undefined because of the this context? When I call a method on the object and then that method calls the get method it fails, is this because the this context changes to the function object? I thought this could be the case but I have another code example that does this and it works fine.

let menu = {
  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: [],
    get appetizers() {
      return this._appetizers;
    },
    get mains() {
      return this._mains;
    },
    get desserts() {
      return this._desserts;
    },
    set appetizers(appetizerIn) {

    },
    set mains(mainIn) {

    },
    set desserts(dessetIn) {

    }
  },
  get courses() {
    return { 
      appetizers: this.appetizers,
     mains: this.mains,
    desserts: this.desserts };
  },
  addDishToCourse(courseName, name, price) {
    const dish = { 
      name,
      price
    };
    this.courses[courseName].push(dish) // fails here
  },
  getRandomDishFromCourse(courseName) {
    const dishes = this._courses[courseName];
    const randomDish = Math.floor(Math.random() * dishes.length);
    return dishes[randomDish];
  },
  generateRandomMeal() {
    const appetizer = this.getRandomDishFromCourse('appetizers');
    const main = this.getRandomDishFromCourse('mains');
    const dessert = this.getRandomDishFromCourse('desserts');
    const totalPrice = appetizer.price + main.price + dessert.price;
    return `Your meal starts with a ${appetizer.name}, followed by the main dish ${main.name}, ending with a dessert of ${dessert.name}. The total price of your dish is £${totalPrice}`;
  }
};

menu.addDishToCourse('appetizers', 'Caesar Salad', 4.25);
menu.addDishToCourse('appetizers', 'Potato Cakes with Smoked Salmon & Cream Cheese', 5.50);
menu.addDishToCourse('appetizers', 'Smoked Salmon, Dill & Lemon Paté', 4.25);
menu.addDishToCourse('appetizers', 'Mini Avocado Toasts', 3.50);

menu.addDishToCourse('mains', 'Spinach & Ricotta Rotolo', 6.75);
menu.addDishToCourse('mains', 'Baked Sea Bass with Lemon Caper Dressing', 8.75);
menu.addDishToCourse('mains', 'Butternut Chilli', 7.50);
menu.addDishToCourse('mains', 'Grilled Miso Salmon with Rice Noodles', 8.50);
menu.addDishToCourse('mains', 'Spinach & Ricotta Rotolo', 6.75);

menu.addDishToCourse('desserts', 'Salted Chocolate & Hazelnut Brownies', 5.00);
menu.addDishToCourse('desserts', 'Cherry & Almond Frangipane Galette', 5.75);
menu.addDishToCourse('desserts', 'Chocolate & Malt Loaf Torte', 5.50);
menu.addDishToCourse('desserts', 'Chocolate Hazelnut Ice cream Cheesecake', 5.00);
menu.addDishToCourse('desserts', 'Peanut Butter Berry Crisp', 5.00);

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

Answer 1

As mentioned in the comments, it's undefined. This is because even though you have a getter, it still sits under the _courses object:

let menu = {
  _courses: {
    _appetizers: [],
    get appetizers() {
      return this._appetizers;
    },
    ...
  }
}

So, you'll want to use this._courses.appetizers , which is a getter for this._courses._appetizers