javascript 对象中所有子项的 getter 和 setter

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 循环，但它不起作用，它显示 "max stack exeeded" 错误。

如何使用纯 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 中是不可能的。

javascript 对象中所有子项的 getter 和 setter

javascript getters and setters for all children in object

javascript

object