javascript - Object.defineProperty 获取设置返回错误值

Question

假设我有一个像这样的对象实例:

var objectA = {"a": 1, "b": 2, "c" : 3};

在我的代码中，我像这样访问该属性:

cc.log(objectA.a); // output 1

现在我想为此对象添加一个 get/set 来提供一些简单的加密/解密功能:

hookSetGet: function (someObject) {
    for (var key in someObject) {
        cc.log("key: " + key);

        // store the origin value before Object.defineProperty
        var pureValue = someObject[key];

        // add a property to store the encrypted value
        var hiddenValueKey = "__" + key;
        someObject[hiddenValueKey] = undefined;

        Object.defineProperty (
            someObject,
            key, 
            {
                set: function (val) {
                    // simulate encrypt
                    this.hiddenValueKey = val + 1;
                    cc.log("hooked set: " + val + " - " + this.hiddenValueKey);
                },
                get: function () {
                    cc.log("hooked get: " + this.hiddenValueKey + " - " + (this.hiddenValueKey - 1));
                    // simulate decrypt
                    return this.hiddenValueKey - 1;
                }
            }
        );

        // trigger set to encrypt
        someObject[key] = pureValue;
    }
}

但是当我像这样测试函数时:

var objectA = {"a": 1, "b": 2, "c" : 3};
this.hookSetGet(objectA);

cc.log(objectA.a);
cc.log(objectA.b);
cc.log(objectA.c);

我没有得到我想要的结果:

key: a
hooked set: 1 - 2
key: b
hooked set: 2 - 3
key: c
hooked set: 3 - 4

hooked get: 4 - 3
3
hooked get: 4 - 3
3
hooked get: 4 - 3
3

似乎即使我打电话

objectA.a

我将得到的值

objectA.c

问题看起来很简单，但我就是不知道哪里出了问题。

如有任何建议，我们将不胜感激，谢谢:)

更新:

我尝试了以下代码，没有更改 hookSetGet 的代码:

cc.log(objectA.__a);
cc.log(objectA.__b);
cc.log(objectA.__c);

并得到:

undefined
undefined
undefined

然后我改变了hookSetGet函数:

set: function (val) {
    // simulate encrypt
    someObject[hiddenValueKey] = val + 1;
    cc.log("hooked set: " + val + " - " + someObject[hiddenValueKey]);
},
get: function () {
    cc.log("hooked get: " + someObject[hiddenValueKey] + " - " + (someObject[hiddenValueKey] - 1));
    // simulate decrypt
    return someObject[hiddenValueKey] - 1;
}

我将所有 this.hiddenValueKey 更改为 someObject[hiddenValueKey]。

输出是:

cc.log(objectA.__a);  // 2   good
cc.log(objectA.__b);  // 3   good
cc.log(objectA.__c);  // 4   good

cc.log(objectA.a);    // hooked get: 4 - 3   still wrong
cc.log(objectA.b);    // hooked get: 4 - 3   still wrong
cc.log(objectA.c);    // hooked get: 4 - 3   still wrong

Answer 1

所以，你写了这个:

   Object.defineProperty (
        someObject,
        key, 
        {
            set: function (val) {
                // simulate encrypt
                this.hiddenValueKey = val + 1;
                cc.log("hooked set: " + val + " - " + this.hiddenValueKey);
            },
            get: function () {
                cc.log("hooked get: " + this.hiddenValueKey + " - " + (this.hiddenValueKey - 1));
                // simulate decrypt
                return this.hiddenValueKey - 1;
            }
        }
    );

在您的 getter 和 setter 中，this.hiddenValueKey 中的 this 在所有情况下都引用您的 objectA 对象，而不是每个属性。因此，当您想要为每个属性设置一个值时，您实际上是在覆盖 objectA.hiddenValueKey。这就是为什么当您尝试获取取回值时，您只能获取最后设置的值。

即使您将 hiddenValueKey 设置为唯一，在 getter 和 setter 中您仍可以访问相同的属性。这是因为 this.hiddenValueKey 与编写 this['hiddenValueKey'] 相同。您的意思是写 this[hiddenValueKey] 吗？即使您这样做，您也可能会遇到一些范围问题，因为 hiddenValueKey 在退出循环后始终具有最新的键值。

所以，你可以试试这个:

   Object.defineProperty (
        someObject,
        key, 
        {
            set: function (val) {
                // simulate encrypt
                this[hiddenValueKey] = val + 1;
                cc.log("hooked set: " + val + " - " + this[hiddenValueKey]);
            },
            get: function () {
                cc.log("hooked get: " + this[hiddenValueKey] + " - " + (this[hiddenValueKey] - 1));
                // simulate decrypt
                return this[hiddenValueKey] - 1;
            }
        }
    );

但是，正如我所说，您可能必须为 hiddenValueKey 变量创建一个闭包，以便它对于每个属性 getter 和 setter 都是唯一的。

您可以像这样创建一个闭包:

   (function(hiddenValueKey) {
     Object.defineProperty (
        someObject,
        key, 
        {
            set: function (val) {
                // simulate encrypt
                this[hiddenValueKey] = val + 1;
                cc.log("hooked set: " + val + " - " + this[hiddenValueKey]);
            },
            get: function () {
                cc.log("hooked get: " + this[hiddenValueKey] + " - " + (this[hiddenValueKey] - 1));
                // simulate decrypt
                return this[hiddenValueKey] - 1;
            }
        }
  );
  }(hiddenValueKey));