JavaScript 异常 : is not a function

Question

我在 JavaScript 中创建了两个对象原型(prototype)。这些是对象构造函数。您可以看到 Board 对象包含一个 PostIt 对象数组:

function PostIt(id, msg, img, pos) {
  this.id = id;
  this.msg = msg;
  this.img = img;
  this.pos = pos.slice(); // copy of array
}

function Board() {
  this.postIts = [];   // Empty array of PostIt objects
} 

每个原型(prototype)都有其方法(getter/setter)，并且 Board 也有从数组中推送和弹出 PostIt 对象的方法。

我还在 Board 中实现了一种机制，通过 localStorage 保存和检索数组:

Board.prototype.save = function () {
  // Clean localstorage first
  localStorage.clear();

  if (this.getNumPostIts() > 0) { // It array is not empty
    localStorage.setItem('myboard', JSON.stringify(this.postIts));
  }
};

// Retrieve array of postit objects from local storage
Board.prototype.load = function () {
  this.postIts = JSON.parse((localStorage.getItem('myboard')));
};

PostIt 对象已正确检索，但我不确定将它们分配给 Board 对象的 this.postIts 数组时会发生什么:

this.postIts = JSON.parse((localStorage.getItem('myboard')));

在加载网站时完成此操作后，当我尝试调用数组中任何 postit 对象的方法时，我会收到异常。例如加载文档后的以下代码

myBoard = new Board();

if (localStorage.myboard) { // Local Storage has data
  // Retrieve data from local storate and dump it to myBoard
  myBoard.load();

  // Display Id for every postit
  for (var i=0; i < myBoard.getNumPostIts(); i++) {
    var pId = myBoard.getPostItByArrayIndex(i).getId();
    console.log("PostIt #%d has id = %d", i, pId);
  }    
} 

调用 PostIt 对象的 getId() 方法会引发异常: jQuery.Deferred 异常:myBoard.getPostItByArrayIndex(...).getId 不是函数 TypeError: myBoard.getPostItByArrayIndex(...).getId 不是函数

我不明白为什么“getId”不是一个函数。我调用这个getter方法有什么问题吗？ 编辑: .getId() 是 PostIt 对象原型(prototype)的 getter 方法:

PostIt.prototype.getId = function() {
  return this.id;
};

Answer 1

JSON 格式不存储转换为 JSON 的对象的原型(prototype)。因此，当您再次解析这些 JSON 字符串时，对象将只是普通对象，与原型(prototype)没有任何关系，例如 PostIt。因此，像 getId 这样的原型(prototype)方法不再适用于这些对象。

同样，您也会丢失对象的直接方法，因为 JSON 不提供函数格式。

如何让它发挥作用

我首先会更改 PostIt 构造函数，以便它具有所有参数的默认值。更具体地说，它需要对 pos 属性进行一些调整:

function PostIt(id, msg, img, pos) {
  this.id = id;
  this.msg = msg;
  this.img = img;
  this.pos = Array.isArray(pos) ? pos.slice() : []; // default is empty array
}

现在您可以使用 Object.assign 将 JSON 解析的对象转换回 PostIt 对象:

Board.prototype.load = function () {
  this.postIts = JSON.parse((localStorage.getItem('myboard')))
                     .map(x => Object.assign(new PostIt, x));
};