Question

I’m trying to procedurally add getters/setters to objects in Javascript and although I think the code below should simply work, it doesn’t act as I expected.

here is my code:

var data = {a:1, b:2, c:3};
function Abc(data) {
    var data = data || {};
    for ( var key in data ) {
        console.log(key, data[key]);
        this.__defineGetter__(key, function() {
                console.log('using getter');
                return data[key];
            })
    }
    return this;
}

abc = Abc(data);
console.log('this should be 1', abc.a);
console.log('this should be 2', abc.b);
console.log('this should be 3', abc.c);

and this is my unexpected output

a 1
b 2
c 3
using getter
this should be 1 3
using getter
this should be 2 3
using getter
this should be 3 3

the output makes absolutely no sense to me, but I get the same output on Chrome and Webkit, so I’m guessing I’m just stupid and this is not a bug of the Javascript engines 🙂

---

as the comments mention my triple use of “data” isn’t really good!

Answer 1

@Robert Gould. main problem in your code sample is not in “defining getters and setters”, but in “understanding closures”.

• See more about closures in MDN

Additionaly your code is invalid on using this keyword, because your Abc() function this object points to global window object. You must use new Abc() to properly use this keyword or must create new empty object inside Abc() and return it.

1)

function Abc(data) {
  data=data||{};
  for(key in data) {
    console.log(key, data[key]);
    (function(data,key) { // defining closure for our getter function 
      this.__defineGetter__(key, function() {
              console.log('using getter');
              return data[key];
            });
    }).call(this,data,key);
  }
  // dont need to return: when used *new* operator *this* is returned by default
}
var abc = new Abc(data);

or
2)

function Abc(data) {
  data=data||{};
  var obj={};
  for(key in data) {
    console.log(key, data[key]);
    (function(data,key) { // defining closure for our getter function 
      obj.__defineGetter__(key, function() {
              console.log('using getter');
              return data[key];
            });
    })(data,key);
  }
  return obj; // return object
}
var abc = Abc(data);

If you realy need to known about “defining getters|setterns” read about:

• Object.defineProperty() MDN and get operator MDN
• and for back compatibility __defineGetter__ MDN
• you must also understand what not all top used browsers currently supports getters and setters for properties