javascript - 对象从服务器发送到客户端时JS原型(prototype)方法消失

Question

我正在使用 Node 服务器将一些对象发送到我的前端代码。我已经使用原型(prototype)向我的对象添加了一些方法，但是当我将它们发送到前端时，原型(prototype)方法消失了。对象仍然具有原型(prototype)方法名称的属性，但值已设置为未定义。有没有办法可以在客户端恢复原型(prototype)方法？

我的代码如下所示:

server.js

function Class (data) {
  this.value = data;
}

Class.prototype.isEven = function() {
  return this.value % 2 === 0;
};

app.get('/data', function(req, res) {
  db.query('select * from table', function(err, rows, fields) {
    var items = [];
    for (var i = 0; i < rows.length; i++) {
      items.push(
        new Class(rows[i]['value'])
      );
    }
    res.send(items);
  });
});

client.js

$.ajax({url: "/data", type: "GET", success: function(data) {
  var item = data[0];
  console.log(item.isEven); // displays 'undefined'
});

Answer 1

对象通过 jQuery Ajax 作为 JSON(纯文本格式)发送。 JSON 将序列化对象的对象属性，但是当它在另一端转换回对象时，它将被转换为普通 JS 对象，而不是任何特定类型的对象，因此它不会有任何类型的自定义原型(prototype)在上面。

JSON 格式没有内置机制来捕获对象的类型并因此保留原型(prototype)方法。因此，当您将 JSON 解析回另一端的对象时，您不会获得原型(prototype)。

此外，JSON 不会序列化函数/方法，只会序列化数据。

对于像您这样的情况，通常的解决方法是只发送一个纯值数组。接收端知道它将接收一个普通的值数组。如果它希望该值数组位于 Class 对象中，那么它将获取该数组并构造一个用适当数据初始化的 Class 对象数组。

$.ajax({url: "/data", type: "GET", success: function(data) {
  // convert array of plain objects into array of Class objects
  var items = data.map(function(item) {
      return new Class(item.value);
  });
  console.log(items[0].isEven());
});

更好的做法是将服务器代码更改为只发送一个普通的数据值数组，而不是一个对象数组，因为这只是不必要的开销。