JavaScript中Getter/Setter方法未按预期工作问题排查：this上下文导致返回undefined的原因咨询

你的推测方向有点偏差，不是方法调用时this切换为函数对象，而是嵌套对象 getter 里的this指向错误，导致this.appetizers返回undefined，进而让this.courses[courseName]变成undefined，调用push时失败。

具体问题拆解 #

我们来一步步捋清楚代码里的this指向逻辑：

1. 你把appetizers/mains/desserts这些 getter 定义在了menu._courses这个嵌套对象里，所以这些 getter 内部的this，指向的是_courses对象本身。
2. 但在menu的courses getter 里，你写了：

   get courses() {
     return { 
       appetizers: this.appetizers, 
       mains: this.mains, 
       desserts: this.desserts 
     };
   }
   

   这里的this指向的是外层的menu对象，而menu本身并没有appetizers这个 getter（它只存在于_courses里），所以this.appetizers自然返回undefined，最终courses.appetizers就是undefined。
3. 到了addDishToCourse方法里，this.courses[courseName]就等于undefined，调用push方法自然会抛出错误。

修复方案 #

有两种简单的修复方式，选哪种都可以：

方案一：修改courses getter，直接访问_courses里的 getter

把courses getter 里的this.appetizers改成this._courses.appetizers，让它正确调用_courses内部的 getter：

get courses() {
  return { 
    appetizers: this._courses.appetizers, 
    mains: this._courses.mains, 
    desserts: this._courses.desserts 
  };
}

方案二：把_courses里的 getter/setter 移到menu顶层

如果你的设计允许，把嵌套在_courses里的 getter/setter 直接挂到menu上，这样this.appetizers就能正确指向menu自身的 getter：

let menu = {
  _courses: {
    _appetizers: [],
    _mains: [],
    _desserts: []
  },
  // 把getter/setter移到顶层
  get appetizers() { return this._courses._appetizers; },
  get mains() { return this._courses._mains; },
  get desserts() { return this._courses._desserts; },
  set appetizers(appetizerIn) { /* 你的set逻辑 */ },
  set mains(mainIn) { /* 你的set逻辑 */ },
  set desserts(dessetIn) { /* 你的set逻辑 */ },
  get courses() {
    return { 
      appetizers: this.appetizers, 
      mains: this.mains, 
      desserts: this.desserts 
    };
  },
  // 其他方法保持不变...
};

验证修复效果 #

用任意一种方案修改后，再调用menu.addDishToCourse就不会报错了，generateRandomMeal也能正常生成随机餐品的完整信息。

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