JavaScript类构造函数内绑定方法返回值到变量的正确写法

你的代码存在constructor内执行顺序错误的问题：
constructor内的代码是从上到下同步执行的，你在调用getValue读取本地存储时，传入的this.BUDGET_LOCAL_STORAGE、this.EXPENSE_LOCAL_STORAGE两个属性还没执行赋值操作，此时这两个属性的值均为undefined，相当于执行localStorage.getItem(undefined)，根本读不到你预先存在对应key下的数据。getValue返回null后，JSON.parse(null)结果为falsy值，触发|| []的兜底逻辑，所以itemList永远是空数组。

更合理的写法是把固定不变的存储key定义为类静态常量，不需要在每个实例上重复赋值，同时把读取存储的逻辑放到常量定义之后，另外补充JSON解析的容错处理，避免非法值导致代码报错：

class UI {
  // 固定存储key定义为类静态常量
  static BUDGET_LOCAL_STORAGE = 'BUDGET_LOCAL_STORAGE';
  static EXPENSE_LOCAL_STORAGE = 'EXPENSE_LOCAL_STORAGE';

  constructor() {
    // 常量定义完成后再执行存储读取
    this.storageBudget = UI.getValue(UI.BUDGET_LOCAL_STORAGE);
    
    // 先判断存储值存在再做JSON解析，避免parse报错
    const expenseStorageVal = UI.getValue(UI.EXPENSE_LOCAL_STORAGE);
    this.itemList = expenseStorageVal ? JSON.parse(expenseStorageVal) : [];
    
    this.itemID = 0;
  }

  static save(key, value) {
    localStorage.setItem(key, value);
  }

  static getValue(key) {
    return localStorage.getItem(key);
  }

  // 补充结构化数据存储方法，存数组/对象前先序列化
  static saveExpenseList(list) {
    UI.save(UI.EXPENSE_LOCAL_STORAGE, JSON.stringify(list));
  }
}

• 存储数组、对象这类结构化数据到localStorage时，必须先用JSON.stringify转成字符串，否则数据会被默认转成[object Object]这类无效字符串，后续解析会出错。
• 不要直接对localStorage.getItem的返回值执行JSON.parse，先判断值是否存在、格式是否合法，避免存储内容被篡改或格式错误时抛出异常阻断整个代码运行。

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