对象中所有 child 的javascript getters和setters

Question

我的getter/setter函数是

var o={}
var bValue = {};
Object.defineProperty(o, 'b', {
    get: function() { return bValue; },
    set: function(newValue) {func(); bValue = newValue; },
});

function func()
{
    console.log(o)
}

所以如果我定义 o.b={msg:"hello"} 它将调用函数 func()。

但我想要的是在此之后，如果我定义 o.b.msg="new" 我想触发 func()。 我尝试了一个 for 循环，但它不起作用，它显示“已执行最大堆栈”错误。

如何使用纯 JavaScript 对 o 中的所有对象执行此操作？

Answer 1

要调用 func() 为 o.b 的子级设置新值，您需要执行以下操作:

var o={};
var children = ['b' /* some known o properties */]

children.forEach(function(child) {
    var childValue = {};
    Object.defineProperty(o, child, {
        get: function() { return childValue; },
        set: function(newValue) {
            func();

            Object.keys(newValue).forEach(function(key) {
                var value = newValue[key];
                Object.defineProperty(childValue, key, {
                    get: function() { return value },
                    set: function(newValue) {
                        func();
                        value = newValue;
                    }
                })
            });
        }
    });
});
function func()
{
    console.log(o)
}

如您所见，只有您事先知道 o 对象的属性名称(请参阅 children 变量)才能执行此操作。如果您想为 o 对象的未定义属性创建一个 getter - 目前这是不可能的。如果你可以使用 ECMAScript6，那么你可以通过 Proxy 对象来实现它(参见 here )。但除此之外，目前在 javascript 中是不可能的。