javascript - 为什么在字符串化并解析回对象后缺少 getter/setter？

Question

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this._greeting = message;
    }
    Object.defineProperty(Greeter.prototype, "greet", {
        get: function () {
            return "Hello, " + this._greeting;
        },
        set: function (message) {
            this._greeting = message;
        },
        enumerable: true,
        configurable: true
    });
    Greeter.prototype.toJSon = function () {
        return JSON.stringify(this);
    };
    return Greeter;
}());
var greeter = new Greeter("world");
var JsonObject = greeter.toJSon();
alert(JsonObject);
// {"_greeting":"world1"} - this is good.

var newGreeter = JSON.parse(JsonObject);
var button = document.createElement('button');

button.textContent = "Say Hello";
button.onclick = function () {
    alert(newGreeter.greet);
    // undefined -- property is missing from object.
    alert(newGreeter._greeting);
    // works fine with "world"
};
document.body.appendChild(button);

在上面的代码中，我创建了一个带有 getter 和 setter 的 Greeter 对象。当我创建它时它工作得很好。

但是一旦我将其字符串化，将其解析回新的 Greeter 对象，并尝试读取 getter/setter，它就会为 greet 返回 undefined 属性。

如何将 JSON 对象解析回对象并使 getter/setter 正常工作？

Answer 1

当您序列化(字符串化)一个对象时，它必然会丢失除键值对之外的所有内容。 getter 和 setter(以及其他函数)无法序列化。

您能做的最好的事情就是用一个值填充 greet，即使它没有 setter/getter。如果您希望在字符串化对象中使用 greet 属性，则必须在实例化对象本身(而不是原型(prototype)上)调用 defineProperty，以便 JSON.stringify(this) 成功调用 getter:

var Greeter = /** @class */ (function() {
  function Greeter(message) {
    this._greeting = message;
    Object.defineProperty(this, "greet", {
      get: function() {
        return "Hello, " + this._greeting;
      },
      set: function(message) {
        this._greeting = message;
      },
      enumerable: true,
      configurable: true
    });
  }
  Greeter.prototype.toJSon = function() {
    console.log(JSON.stringify(this));
    return JSON.stringify(this);
  };
  return Greeter;
}());

var greeter = new Greeter("world");
var JsonObject = greeter.toJSon();

var newGreeter = JSON.parse(JsonObject);
var button = document.createElement('button');

button.textContent = "Say Hello";
button.onclick = function () {
    console.log(newGreeter.greet);
    console.log(newGreeter._greeting);
};
document.body.appendChild(button);