为何JSON.stringify会遗漏Fabric.js Canvas对象的属性？

问题根源 #

这个现象由两方面因素共同导致：

1. JSON.stringify的序列化规则
   JSON.stringify仅会序列化对象的可枚举自有属性；若对象定义了自定义的toJSON()方法，则会优先调用该方法的返回值完成序列化，跳过默认的属性遍历逻辑。

2. Fabric.js Canvas对象的属性设计

• width、height属于访问器属性（getter/setter），这类属性默认的enumerable特性为false，不属于可枚举属性，因此无法被JSON.stringify的默认逻辑识别。
• Fabric.js为Canvas对象内置了toJSON()方法，该方法仅返回框架预设的可序列化属性集合，不会包含你手动添加的自定义属性（如myMadeUpThing）。

解决方案 #

如果需要完整序列化所需属性，可采用以下方式：

• 获取包含核心属性的对象：使用Fabric.js提供的toObject()方法，它会返回包含width、height等属性的普通对象，再进行序列化：

  const canvasObj = canvas.toObject();
  console.log(JSON.stringify(canvasObj));
  

• 包含自定义属性：可以扩展toJSON方法，或者手动合并自定义属性到序列化对象中：

  // 扩展toJSON方法
  fabric.Canvas.prototype.toJSON = function() {
    const baseData = this.toObject();
    return { ...baseData, myMadeUpThing: this.myMadeUpThing };
  };
  console.log(JSON.stringify(canvas));
  
  // 手动合并属性
  const canvasData = Object.assign(canvas.toObject(), { myMadeUpThing: canvas.myMadeUpThing });
  console.log(JSON.stringify(canvasData));
  

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