使用Javascript getter/setter的奇怪行为

Question

我正在尝试创建一个对象,该对象自动为对象的新实例定义getter/setter.我希望setter将值放在一个名为newValues的单独对象属性中.为什么在下面的代码片段中设置prop1的值实际设置了newValues.prop2的值而不是newValues.prop1？

我在这做傻事吗？这完全有可能因为我只睡了几个小时...... :)

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'

Answer 1

因为当你最终使用你为getter/setter创建的函数时,key它有它的最终值.您需要关闭key循环的每次迭代的值.JavaScript具有功能范围,而不是块范围.

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));
    }
}