Using `Object.defineProperty` with RangeError

Question

I'm trying to use Object.defineProperty to update my obj object to have a get and set accessor on obj.name.

var obj = {};

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

console.log("obj:", obj);
console.log("obj.name:", obj.name);

But I'm getting a Uncaught RangeError: Maximum call stack size exceeded.

How can I use Object.defineProperty to add get and set accessors on the name property in obj?

http://jsfiddle.net/kman007_us/ZwYp6/

Answer 1

When you get obj.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
When you get this.name, the get function is called, which returns the value of this.name.
Uncaught RangeError: Maximum call stack size exceeded.

---

Try return this.__name; and this.__name = x; instead.

Answer 2

You cannot access a property in the getters or setters by the same name as a property you are defining using Object.defineProperty. You've created a recursive function call that never exits.