JavaScript getter/setter 和扩展对象

Question

我正在研究 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

有人能解释一下那里发生了什么吗？为什么调用原来的setter后，原来的getter也恢复了？

Answer 1

Underscore 的 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。）