CODEWITHSUNDEEP
javascriptnode.jsobjectgetter-setter
Kevin O'Hara
Kevin O'Hara

Reputation: 337

Weird behavior with Javascript getter/setters

I am trying to create an object that defines getters/setters automatically for a new instance of an object. I want the setter to put the values in a separate object property called newValues. Why in the following code snippet does setting the value of prop1 actually set the value of newValues.prop2 instead of newValues.prop1?

Am I doing something silly here? It's totally possible as I am on only a few hours of sleep... :)

var Record = function(data) {
  this.fieldValues = {}
  this._data = data;
  var record = this;
  for(var key in data) {
    record.__defineGetter__(key, function() {
      return record._data[key];
    });
    record.__defineSetter__(key, function(val) {
      record.fieldValues[key] = val;
    });
  }
}

var myRecord = new Record({prop1: 'prop1test', prop2: 'prop2test'});

myRecord.prop1 = 'newvalue';

console.log(myRecord.fieldValues.prop1); // undefined
console.log(myRecord.fieldValues.prop2); // 'newvalue'

Upvotes: 2

Views: 1286

Answers (2)

Jani Hartikainen
Jani Hartikainen

Reputation: 43243

This is the usual thing where people stumble with JS: The closure in a loop problem.

This explains it quite nicely along with a solution: http://www.mennovanslooten.nl/blog/post/62

Upvotes: 3

zzzzBov
zzzzBov

Reputation: 179096

Because when you eventually use the function that you've created for the getter/setter, key has its final value. You need to close over the value of key for each iteration of the loop. JavaScript has functional scope, not block scope.

var Record = function(data) {
    var key;
    this.fieldValues = {}
    this._data = data;
    for(key in data) {
        //closure maintains state of "key" variable
        //without being overwritten each iteration
        (function (record, key) {
            record.__defineGetter__(key, function() {
                return record._data[key];
            });
            record.__defineSetter__(key, function(val) {
                record.fieldValues[key] = val;
            });
        }(this, key));
    }
}

Upvotes: 9

Related Questions