JavaScript：如何向箭头函数创建对象内的数组push并实现order方法

this无法正常访问consumption的核心原因是箭头函数的上下文绑定规则：

• 箭头函数没有独立的this，它的this永远继承自定义位置外层的非箭头函数作用域
• 你代码里order、pay都写成了箭头函数，这两个函数执行时的this不会指向createMenu返回的对象实例，自然读不到对象上挂载的consumption数组，执行push就会报错。

把需要访问对象自身属性的方法，从箭头函数改成普通函数形式即可。普通函数作为对象方法调用时，this会自动绑定到当前调用的对象实例。你也可以用ES6对象方法简写语法，写法更简洁，this指向和普通函数完全一致。

修正后的完整代码：

const createMenu = (menu) => ({
  fetchMenu: () => menu,
  consumption: [1, 2],
  // ES6方法简写，this指向当前对象
  order(string) {
    this.consumption.push(string);
  },
  pay() {
    let cont = 0
    const cardapio = { ...menu.food, ...menu.drink }
    for (const itens of this.consumption) {
      cont += cardapio[itens];
    }
    return cont;
  },
});

// 初始化菜单
const restaurantMenu = createMenu({
  food: { pasta: 32, fries: 12 },
  drink: { lemonade: 8 }
});

// 点单
restaurantMenu.order('pasta');
restaurantMenu.order('lemonade');

// 结账计算
console.log(restaurantMenu.pay()); // 输出 40，计算逻辑正常
console.log(restaurantMenu.consumption); // 输出 [1,2,'pasta','lemonade']，push操作生效

• 对象方法如果需要访问自身属性、调用自身其他方法，不要用箭头函数定义
• 只有当方法不需要依赖对象上下文时，才可以放心用箭头函数，比如你代码里的fetchMenu只是返回闭包捕获的menu参数，不需要访问this，用箭头函数完全没问题。

内容的提问来源于stack exchange，提问作者Rafael Aguiar Gomes