是否有一种在香草JavaScript中聆听/代理变量的方法？

Question

我正在构建一个网络框架，例如React；我想改善反应的一件事是状态。

我的想法是像Svelte这样的想法，使用状态您只需创建一个普通变量（在我的情况下，在创建TE状态时可以使用功能，但在更新时可以使用函数），但是Svelte是如何通过编译，来编译，我希望它可以在香草JavaScript中工作。

从我的理解来看，这是不可能的，但是我仍然试图以某种方式破解一些东西。

因此，该状态系统的一部分是不可能的，就是知道何时设置了原始的设置并获得（setters＆amp; getters），我希望它与范围的变量一起使用。因此，我无法在window> window或globalthis this上使用object.defineProperty。我已经四处hack了一段时间，这是我认为唯一可以使用的解决方案：

1. 代理一个new String（String），给出了这种错误类型的蜜蜂的怪异错误，价值和东西。
2. 代理funtion.arguments对象，但这无效。
3. 使用symbol.tprimitive，但是我找不到没有+或$ {}的方法。

但是，如您所见，它们都有问题，我陷入困境，找不到任何东西，即使没有遗产或弃用的代码，即使是hacky，即使是hacky）？谢谢你！

Answer 1

您无法做您在JavaScript中描述的事情。您不能代表原始的原始方式，并且只有在读取或设置a variable 时，只有在A property of时，就不能以其他方式运行代码（getter，setter）读取或设置对象。

在严格模式在其中有一个带有getters和setter的对象，然后将其放入用于使用语句的使用来解决自由主义标识符的环境中，但同样，它是不允许的严格模式下的充分理由（这是模块和其他创建新上下文的机制的默认原因，例如class的主体）。

我不愿举一个例子，但是出于完整性：

// This only works in loose mode, not strict mode
let a = 0;
const obj = {
    get a() {
        console.log(`Getter called, returning a = ${a}`);
        return a;
    },
    set a(value) {
        console.log(`Setter called, setting a = ${value}`);
        a = value;
    }
};
with (obj) {
    console.log(a);
    a = 42;
    console.log(a);
}

---

您更新的问题：

我的想法就像Svelte一样，使用状态您只需创建一个普通变量...但是Svelte是如何通过编译来完成这种魔术的，我希望它能在Vanilla Javascript中使用。

我不会尝试使用独立变量来完成此操作，让用户提供状态对象并将其数据属性转换为getter/setter组合（或用新的带有getter/setter组合等的版本：）：

// Userland code provides a state object
const state = {
    a: 0,
    b: "hi",
};

// Your framework code converts it to using getters/setters
function enhance(obj) {
    const descrs = Object.getOwnPropertyDescriptors(obj);
    for (const key of Object.keys(descrs)) {
        const descr = descrs[key];
        if (descr.configurable && "value" in descr && typeof descr.value !== "function") {
            // A simple data property; wrap it in getter/setter
            let value = descr.value;
            if (typeof value === "object") {
                enhance(value);
            } else {
                Object.defineProperty(obj, key, {
                    get() {
                        console.log(`Getter called, returning ${key} = ${value}`);
                        return value;
                    },
                    set(newValue) {
                        console.log(`Setter called, setting ${key} = ${newValue}`);
                        value = newValue;
                    },
                    enumerable: descr.enumerable,
                    configurable: true,
                });
            }
        }
    }
}
enhance(state);

// Their code using the properties triggers your getter/setters:
console.log(state.a, state.b);
state.a = 42;
state.b = state.b.toUpperCase();
console.log(state.a, state.b);