javascript - 如何按程序设置 Javascript getter/setter？ (或者实际上是闭包范围)

Question

我正在尝试按程序向 Javascript 中的对象添加 getter/setter，尽管我认为下面的代码应该可以正常工作，但它的行为并不符合我的预期。

这是我的代码:

var data = {a:1, b:2, c:3};
function Abc(data) {
    var data = data || {};
    for ( var key in data ) {
        console.log(key, data[key]);
        this.__defineGetter__(key, function() {
                console.log('using getter');
                return data[key];
            })
    }
    return this;
}

abc = Abc(data);
console.log('this should be 1', abc.a);
console.log('this should be 2', abc.b);
console.log('this should be 3', abc.c);

这是我意想不到的输出

a 1
b 2
c 3
using getter
this should be 1 3
using getter
this should be 2 3
using getter
this should be 3 3

输出对我来说完全没有意义，但我在 Chrome 和 Webkit 上得到相同的输出，所以我猜我只是愚蠢，这不是 Javascript 引擎的错误:)

<小时/>

正如评论中提到的，我三次使用“数据”并不是很好!

Answer 1

当传递给__defineGetter__的闭包被执行时，循环已经完成并且key保持在最后的值。试试这个:

function Abc(data) {
    if(!(this instanceof Abc)) {
        return new Abc(data);
    }
    data = data || {};
    for(var key in data) {
        (function(key) {
            console.log(key, data[key]);
            this.__defineGetter__(key, function() {
                console.log('using getter');
                return data[key];
            });
        }).call(this, key);
    }
    return this;
}

其他一些事情:

1. 您没有在 key 上使用 var，因此 key 是全局的。这并不是导致您出现问题的原因，但无论如何添加它都是一个好主意。
2. 当函数作用域中已经存在 data 时，您声明了一个名为 data 的新变量。那里不需要使用 var 因为函数中已经有 data ；我把它删除了。
3. 您没有使用 new，这也会导致奇怪的行为；函数顶部新的三行使它的行为就像是用 new 调用的。