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);

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

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

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

标签： javascriptgetter-setter

Answer 1

当您序列化（字符串化）一个对象时，它必然会丢失除键值对之外的所有内容。Getter 和 setter（以及其他函数）不能被序列化。

您能做的最好的事情就是填充greet一个值，即使它没有 setter/getter。如果您希望该greet属性在字符串化对象中可用，则必须调用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);