javascript - 奇怪的 JavaScript 行为(我期待递归)

Question

我用 JavaScript 编写了一个简单的类(因为需要更好的词)。该类创建两个名为 foo 和 bar 的访问器(get/set)属性，以及两个名为 setProperty 和 getProperty 的方法>.

属性的获取/设置方法调用 getProperty 和 setProperty，它们依次从属性对象获取和设置属性。

我希望在这里看到无限递归，其中属性调用方法，方法调用属性，方法调用方法......等等。

但它有效......而且我对这些值的存储方式和位置感到困惑!

示例代码

var Test = (function () {
    return function Test() {
        var $this = this,
            properties = {
                foo: {
                    get: function () { return $this.getProperty("foo"); },
                    set: function (value) { $this.setProperty("foo", value); },
                    enumerable: false,
                    configurable: false
                },
                bar: {
                    get: function () { return $this.getProperty("bar"); },
                    set: function (value) { $this.setProperty("bar", value); },
                    enumerable: false,
                    configurable: false
                }
            };

        Object.defineProperties(this, properties);

        this.getProperty = function (name) {
            console.log("get was definitely called!");
            return properties[name];
        };

        this.setProperty = function (name, value) {
            console.log("set was definitely called!");
            properties[name] = value;
        };
    };
})();

var test = new Test();
//undefined
test.foo = "Hello World";
//set was definitely called!
//"Hello World"
test.bar = 3;
//set was definitely called!
//3
test.foo;
//get was definitely called!
//"Hello World"
test.bar;
//get was definitely called!
//3

很想知道为什么我不只是收到“太多递归”错误!

Answer 1

当您调用 defineProperties 时，您是在 test 对象中创建属性，而不是在 properties 对象中创建属性。

properties 对象不再用作属性，仅重用为属性值的存储。设置 foo 属性将用该值替换 property 对象中的属性定义。

当您设置 test.foo 属性时，将调用该属性的 setter 代码并将值存储在 properties 对象中，但这并不影响test.foo 属性。一旦创建了属性，用于定义它们的对象就不再使用。

代码有点困惑，因为它首先使用 properties 对象作为属性的定义，然后重用它来存储属性值。如果为此使用两个单独的对象，则更清楚为什么设置属性不会影响属性本身:

var Test = (function () {
    return function Test() {
        var $this = this,
            def = {
                foo: {
                    get: function () { return $this.getProperty("foo"); },
                    set: function (value) { $this.setProperty("foo", value); },
                    enumerable: false,
                    configurable: false
                },
                bar: {
                    get: function () { return $this.getProperty("bar"); },
                    set: function (value) { $this.setProperty("bar", value); },
                    enumerable: false,
                    configurable: false
                }
            },
            storage = {};

        Object.defineProperties(this, def);

        this.getProperty = function (name) {
            console.log("get was definitely called!");
            return storage[name];
        };

        this.setProperty = function (name, value) {
            console.log("set was definitely called!");
            storage[name] = value;
        };
    };
})();