用Javascript getter/setters怪異的行爲

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具有功能範圍，而不是範圍範圍。

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

Answer 2

這是人們用JS絆倒了平常的事情：在一個循環的問題關閉。

這個解釋很好，並附有解決方案：http://www.mennovanslooten.nl/blog/post/62