JavaScript automatic getter/setters (John Resig book)

Question

I'm reading "Pro JavaScript Techniques" by John Resig, and I'm confused with an example. This is the code:

// Create a new user object that accepts an object of properties
function User( properties ) {
  // Iterate through the properties of the object, and make sure
  // that it's properly scoped (as discussed previously)
  for ( var i in properties ) { (function(){
  // Create a new getter for the property
  this[ "get" + i ] = function() {
    return properties[i];
  };
  // Create a new setter for the property
  this[ "set" + i ] = function(val) {
    properties[i] = val;
  };
})(); }
}

// Create a new user object instance and pass in an object of
// properties to seed it with
var user = new User({
  name: "Bob",
  age: 44
});

// Just note that the name property does not exist, as it's private
// within the properties object
alert( user.name == null );

// However, we're able to access its value using the new getname()
// method, that was dynamically generated
alert( user.getname() == "Bob" );

// Finally, we can see that it's possible to set and get the age using
// the newly generated functions
user.setage( 22 );
alert( user.getage() == 22 );

Now running that in the Firebug console (on Firefox 3) throws that user.getname() is not a function. I tried doing this:

var other = User
other()
window.getname() // --> This works!

And it worked!

Why?

Doing:

var me = this;

seems to work a bit better, but when executing "getname()" it returns '44' (the second property)...

Also I find it strange that it worked on the window object without modification...

And a third question, what's the difference between PEZ solution and the original? (He doesn't use an anonymous function.)

Answer 1

I think it's best not to use the new keyword at all when working in JavaScript.

This is because if you then instantiate the object without using the new keyword (ex: var user = User()) by mistake, *very bad things will happen...*reason being that in the function (if instantiated without the new keyword), the this will refer to the global object, ie the window...

So therefore, I suggest a better way on how to use class-like objects.

Consider the following example :

var user = function (props) {
    var pObject = {};
    for (p in props) {
        (function (pc) {
            pObject['set' + pc] = function (v) {
                props[pc] = v;
                return pObject;
            }
            pObject['get' + pc] = function () {
                return props[pc];
            }
        })(p);
    }
    return pObject;
}

In the above example, I am creating a new object inside of the function, and then attaching getters and setters to this newly created object.

Finally, I am returning this newly created object. Note that the the this keyword is not used anywhere

Then, to 'instantiate' a user, I would do the following:

var john = user({name : 'Andreas', age : 21});
john.getname(); //returns 'Andreas'
john.setage(19).getage(); //returns 19

The best way to avoid falling into pitfalls is by not creating them in the first place...In the above example, I am avoiding the new keyword pitfall (as i said, not using the new keyword when it's supposed to be used will cause bad things to happen) by not using new at all.

Answer 2

Adapting Jason's answer, it works:

We need to make a closure for the values. Here's one way:

function bindAccessors(o, property, value) {
  var _value = value;
  o["get" + property] = function() {
    return _value;
  };
  o["set" + property] = function(v) {
    _value = v;
  };
}

Then the User constructor looks like this:

function User( properties ) {
  for (var i in properties ) {
    bindAccessors(this, i, properties[i]);
  }
}

Answer 3

You probably want something like this, which is more readable (closures are easy to learn once you get some practice):

function User( properties ) {
  // Helper function to create closures based on passed-in arguments:
  var bindGetterSetter = function(obj, p, properties)
  {
    obj["get" + p] = function() { return properties[p]; }
    obj["set" + p] = function(val) { properties[p]=val; return this; }
  };
  for (var p in properties)
    bindGetterSetter(this, p, properties);
}

I also added "return this;", so you can do:

u = new User({a: 1, b:77, c:48});
u.seta(3).setb(20).setc(400)

Answer 4

I started this post with the sole purpose of learning why that things happened, and I finally did. So in case there's someone else interested in the "whys", here they are:

Why does 'this' changes inside the anonymous function?

A new function, even if it is an anonymous, declared inside an object or another function, always changes the scope, in this case returning to the global scope (window).

Solution: all stated in the post, I think the clearer is executing the anonymous function with .call(this).

Why does getname() always return the age?

While the anonymous function gets executed right away, the getters/setters get executed for the first time when they are called. In that moment, the value of i will always be the last, because it has already iterated for all the properties... and it will always return properties[i] which is the last value, in this case the age.

Solution: save the i value in a variable like this

 for ( i in properties ) { (function(){ 
  var j = i
  // From now on, use properties[j]

Answer 5

As written in the OP, this in the loop is not referring to the User object as it should be. If you capture that variable outside the loop, you can make it work:

function User( properties ) {
  // Iterate through the properties of the object, and make sure
  // that it's properly scoped (as discussed previously)
 var me = this;
 for ( i in properties ) { (function(){
  // Create a new getter for the property
  me[ "get" + i ] = function() {
    return properties[i];
  };
  // Create a new setter for the property
  me[ "set" + i ] = function(val) {
    properties[i] = val;
  };
 // etc

Answer 6

I just modified the code a bit like this.. This one should work.. This is same as setting me=this; But a closure is required to set the value of each property properly, else the last value will be assigned to all properties.

    // Create a new user object that accepts an object of properties
    var User = function( properties ) {
      // Iterate through the properties of the object, and make sure
      // that it's properly scoped (as discussed previously)
      var THIS = this;
      for ( var i in properties ) { (function(i){
      // Create a new getter for the property
      THIS[ "get" + i ] = function() {
        return properties[i];
      };
      // Create a new setter for the property
      THIS[ "set" + i ] = function(val) {
        properties[i] = val;
      };
    })(i); }
    }

    // Create a new user object instance and pass in an object of
    // properties to seed it with
    var user = new User({
      name: "Bob",
      age: 44
    });

// Just note that the name property does not exist, as it's private
// within the properties object
alert( user.name == null );

// However, we're able to access its value using the new getname()
// method, that was dynamically generated
alert( user.getname() == "Bob" );

// Finally, we can see that it's possible to set and get the age using
// the newly generated functions
user.setage( 22 );
alert( user.getage() == 22 );

Answer 7

Maybe the variable i is "closured" with the last value in the iteration ("age")? Then all getters and setters will access properties["age"].

Answer 8

I found something that seems to be the answer; it’s all about context. Using the anonymous function inside the for loop, changes the context, making 'this' refer to the window object. Strange isn't it?

So:

function User(properties) {

  for (var i in properties) {

    // Here this == User Object
    (function(){
      // Inside this anonymous function, this == window object
      this["get" + i] = function() {
        return properties[i];
      };

      this["set" + i] = function(val) {
        properties[i] = val;
      };
    })();
  }
}

I don't know why that function changes the context of execution, and I'm not sure it should do that. Anyway, you can test it running the code there and trying window.getname(). It magically works! :S

The solution, as stated before, is changing the context. It can be done like J Cooper said, passing the variable 'me' and making the function a closure or you can do this:

(function(){
    // Inside this anonymous function this == User
    // because we called it with 'call'
    this[ "get" + i ] = function() {
      return properties[i];
    };

    this["set" + i] = function(val) {
      properties[i] = val;
    };
 }).call(this);

Anyway, I'm still getting 44 when running 'getname'... What could it be?