javascript - Javascript getter/setter 的奇怪行为

Question

我正在尝试创建一个自动为对象的新实例定义 getters/setters 的对象。我希望 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 具有函数作用域，而不是 block 作用域。

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