我正在研究JavaScript中的getter和setter以及它们与扩展对象的扩展函数的关系,例如jQuery的$ .extend和Underscore的_.extend。代码设置如下:
var test = {
get size() { return this._size; },
set size(val) { this._size = val; },
}
test.size = "LARGE";
console.log(test.size);
//$.extend(test, { get size() { return "MEDIUM"; } });
_.extend(test, { get size() { return "MEDIUM"; } });
console.log(test.size);
test.size = "SMALL";
console.log(test.size);
在Chrome和Firefox中,我得到:
LARGE
MEDIUM
SMALL
有人可以解释一下那里发生了什么吗?为什么在打电话给原来的二传手后,原来的吸气剂也会恢复?
答案 0 :(得分:5)
下划线的extend
看起来像这样:
_.extend = function(obj) {
each(slice.call(arguments, 1), function(source) {
for (var prop in source) obj[prop] = source[prop];
});
return obj;
};
迭代源对象的属性,将它们添加到目标对象,然后返回目标对象。当它将size
属性复制到您正在扩展的对象时,它基本上会这样做:
obj['size'] = source['size']
也就是说,它使用新对象的getter,但只复制该getter返回的值。它不会传输吸气剂本身。
要进一步证明这一点,请尝试以下方法:
var test = {
get size() { return this._size; },
set size(val) { this._size = val; },
}
for (var p in test) {
console.log(p)
}
仅输出:
size
(它不会迭代getter或setter。)