JSON.stringify исключает свойства объекта
Я пытаюсь понять, почему JSON.stringify показывает результат, отличный от объекта, который я ожидаю увидеть.
В моем случае мой object имеет property из height и width.
Итак, если бы я выполнил следующее
const canvas = new fabric.Canvas("c");
console.info("canvas.width: " + canvas.width)
Тогда вывод будет
ширина холста: 300
Однако, когда я выступаю
console.info(JSON.stringify(canvas));
выходные данные не включают ширину.
В моей реальной ситуации я использую Fabricjs.com.
JSFiddle: https://jsfiddle.net/tdge2908/2/
<canvas id = "c"></canvas>
<div id = "result">
</div>
const canvas = new fabric.Canvas("c");
console.info("canvas.isRendering: " + canvas.width)
const result= document.getElementById("result");
result.innerText = JSON.stringify(canvas);
Точно так же я мог бы добавить что-то к своему объекту холста, и это все равно не будет отображаться, когда я его приведу в строку.
НАПРИМЕР
const canvas = new fabric.Canvas("c");
canvas.myMadeUpThing = "hello";
console.info("canvas.my made up thing: " + canvas.myMadeUpThing ); //this works
const result= document.getElementById("result");
result.innerText = JSON.stringify(canvas);
JSFiddle: https://jsfiddle.net/tdge2908/4/
Почему вызов JSON.stringify на этом объекте делает что-то неожиданное?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Объект, возвращаемый new fabric.Canvas("c"), имеет метод toJSON в цепочке прототипов. Этот метод, если он присутствует, вызывается JSON.stringify и переопределяет поведение по умолчанию.
Обратите внимание, что width — это собственное перечислимое свойство, поэтому это не причина, по которой оно не будет включено в выходные данные JSON.
Вы можете (временно) установить canvas.toJSON в undefined, а затем запустить JSON.stringify, но canvas имеет циклические ссылки, а это означает, что JSON.stringify больше не сможет его сериализовать.
Решением может быть переопределение canvas.toJSON, чтобы он возвращал объект с интересующими свойствами.
Например:
// Define a custum toJSON method for canvas elements:
fabric.Canvas.prototype.toJSON = function() {
const { width, height } = this;
return { width, height };
};
const canvas = new fabric.Canvas("c");
console.info(JSON.stringify(canvas));<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
В JSON включены только «перечисляемые собственные» свойства. Итак,
heightиwidthлибо неперечисляемы, либо не являются собственными.