javascript - 将 getter 和 setter 与 Object.defineProperty 一起使用

Question

我想使用 Object.defineProperty() 将数据属性转换为访问器属性。考虑一下导致 Uncaught RangeError: Maximum call stack size returned 错误的代码

var c = { name: 'abcde'};
Object.defineProperty(c, 'name', {
    get: function() {
        return this.name; //causes stack overflow
    },
    set: function(x) {
       this.name = x; //causes stack overflow
        }
}); 
c.name="xyz";  
console.log(c.name);

我明白为什么会出现错误。建议的解决方案之一是从 getter 和 setter 中删除“this”，它似乎有效。

var c = { name: 'abcde'};
Object.defineProperty(c, 'name', {
    get: function() {
        return name; //removed this
    },
    set: function(x) {
       name = x; //removed this
        }
}); 
c.name="xyz";  
console.log(c.name);

发生什么事了？一般来说，我想问如何使用 Object.defineProperty() 将数据属性转换为访问器属性？

Answer 1

第二个代码实际上不起作用，因为它使用名为name的全局变量来存储值，而不是将其存储在对象c。

如果不是因为 window.name 是浏览器中全局对象的默认属性，它会被 ES5“严格模式”拒绝。

更合适的解决方法是将值存储在词法范围的私有(private)变量中:

var c = (function() {
    var obj = {};
    var name = "abcde";

    Object.defineProperty(obj, "name", {
        get: function() {
            return name;
        },
        set: function(x) {
            name = x;
        }
    });

    return obj;
})();