使用 getter 和 setter 与 Object.defineProperty

Question

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

的代码

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.

中

它会被 ES5 "strict mode" 拒绝，如果不是因为 window.name 是浏览器中全局对象的默认值属性。

更合适的修复方法是将值存储在词法范围内的私有变量中：

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

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

    return obj;
})();

使用 getter 和 setter 与 Object.defineProperty

Using getter and setter with Object.defineProperty

javascript

ecmascript-5