从LocalStorage取出Book对象数组后，toString方法失效如何解决？

JSON序列化（JSON.stringify）只会保存对象的可枚举属性值，不会保留对象的类原型、方法等信息。你存入localStorage的是Book实例的属性副本，取出后通过JSON.parse得到的只是普通JavaScript对象，不是Book类的实例，自然没有你自定义的toString()方法，调用toString()时会使用Object的默认实现，返回[object Object]。

以下几种方法可以解决这个问题：

方法1：解析后转换为Book实例 #

遍历解析后的数组，将每个普通对象重新实例化为Book对象，这样就能继承类的toString()方法：

var books = JSON.parse(localStorage.getItem("mybooks")).map(bookObj => {
  // 重新创建Book实例
  const book = new Book(bookObj.title, bookObj.commentary);
  // 注意：Date对象序列化后会变成字符串，需要重新转换为Date实例
  book.date = new Date(bookObj.date);
  return book;
});

console.log("books: " + books.toString()); // 输出：books: "The Hobbit","Pride and Prejudice"

方法2：使用JSON.parse的reviver函数 #

在解析时直接通过reviver函数将对象转为Book实例，一步完成转换：

var books = JSON.parse(localStorage.getItem("mybooks"), (key, value) => {
  // 顶层数组不处理，只处理内部的Book对象
  if (typeof value === 'object' && value !== null && 'title' in value) {
    const book = new Book(value.title, value.commentary);
    book.date = new Date(value.date);
    return book;
  }
  return value;
});

console.log("books: " + books.toString()); // 输出符合预期

方法3：为普通对象添加toString方法（无需实例化） #

如果不需要Book类的其他方法，只是想让toString输出正确，可以直接给解析后的对象添加自定义toString：

var books = JSON.parse(localStorage.getItem("mybooks")).map(bookObj => {
  bookObj.toString = function() {
    return `"${this.title}"`;
  };
  return bookObj;
});

console.log("books: " + books.toString()); // 输出符合预期

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