Meal Maker

Hello all, may I ask why does this code work?

const menu = {
  _courses: {
    appetizers: ["hello"],
    mains: [],
    desserts: []
  },
  get appetizers() {
    return this.appetizers;
  },
  set appetizers(appetizer) {
    this.appetizers.push(appetizer);
  },
  get mains() {
    return this.mains;
  },
  set mains(main) {
    this.mains.push(main);
  },
  get desserts() {
    return this.desserts;
  },
  set desserts(dessert) {
    this.appetizers.push(dessert);
  },  
  get courses() {
    return {
      appetizers: this._courses.appetizers,
      mains: this._courses.mains,
      desserts: this._courses.desserts
    };
  }
};

(do pardon my poor naming conventions)
In the getters for appetizers, mains and desserts, it is instinctive to think that this would refer to the menu object. However if that is the case, then it shouldn’t be able to access the appetizers, mains and desserts properties within _courses.

Thanks for helping!