JavaScript TypeError，无法读取未定义的属性，但函数已定义。 我究竟做错了什么？

Question

我不断收到错误消息：“ TypeError：无法读取未定义的属性'push'”

错误在以下行中：“ this.courseName.push（dish）;”

这是代码：

let menu = {
    _courses: {
      _appetizers:[] ,
      _mains:[],
      _desserts: []
    },

    addDishToCourse(courseName, dishName, dishPrice){
        const dish = { name: this.dishName, price: this.dishPrice };

        // ERROR HERE: **this._courses[courseName].push(dish);**
    },
};

我已经被这个错误困扰了几个小时。 有没有我看不到的东西吗？

抱歉，如果有一个简单的解决方案。 我对JavaScript比较陌生。

编辑：

我确实是错误地调用了密钥。 我现在将该函数称为：

  menu.addDishToCourse("_appetizers", "random", 10);
  console.log(menu._courses._appetizers);

当我在编译器中登录时，它返回：

    [ { name: undefined, price: undefined } ]

似乎没有调用该函数。 我是否从根本上错误地解决了这个问题？

Answer 1

问题在于scope 。

this是object本身（在这种情况下为菜单），并具有_courses和addDishToCourse作为其属性。

在addDishToCourse内部， this是在查看object的dishName和dishPrice ，但它们的作用域dishPrice于函数本身（通过参数）。

因此正确的代码如下所示：

let menu = {
        _courses: {
            _appetizers: [],
            _mains: [],
            _desserts:[]
        },

        addDishToCourse(courseName, dishName, dishPrice) {
            const dish = { name: dishName, price: dishPrice };

            this._courses[courseName].push(dish);
        }
    }    

menu.addDish("_mains", "Pizza", "10");

Answer 2

您的第一个问题是，您向函数传递了错误的courseName ，这就是为什么会出现错误。

第二个问题是使用{ name: this.dishName, price: this.dishPrice }时，您分配了错误的值来反对将您的课程数组推入。

实际上，当您使用this.dishName您试图从menu对象中获取dishName ，这就是undefined的原因，您只需要使用参数dishName和dishPrice dishName ， dishPrice可以将参数传递给该函数。

    const dish = {
      name: dishName,
      price: dishPrice
    };

    this._courses[courseName].push(dish);

这是一个有效的演示：

 let menu = { _courses: { _appetizers: [], _mains: [], _desserts: [] }, addDishToCourse(courseName, dishName, dishPrice) { const dish = { name: dishName, price: dishPrice }; this._courses[courseName].push(dish); }, }; menu.addDishToCourse("_appetizers", "random", 10); console.log(menu._courses._appetizers);