Getters/setters de JavaScript y extender objetos

Question

Estoy investigando getters y setters en JavaScript y qué tan bien van con las funciones de extensión para extender objetos, como $ .extend de jQuery y _.extend de Underscore. La configuración del código es el siguiente:

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

En Chrome y Firefox me sale:

LARGE 
MEDIUM 
SMALL 

Puede alguien explicar lo que está ocurriendo allí? ¿Por qué después de llamar al colocador original, también se restaura el getter original?

Answer 1

Subrayado de extend se parece a esto:

_.extend = function(obj) { 
    each(slice.call(arguments, 1), function(source) { 
    for (var prop in source) obj[prop] = source[prop]; 
    }); 
    return obj; 
}; 

itera las propiedades del objeto de origen, los agrega al objeto de destino, y luego devuelve el objeto de destino. Cuando se copia la propiedad size al objeto que extendemos, que básicamente hace lo siguiente:

obj['size'] = source['size'] 

Es decir, se utiliza captador del nuevo objeto, pero las copias sólo el valor devuelto por que getter. No transfiere el captador en sí.

Para demostrar aún más esto, pruebe lo siguiente:

var test = { 
    get size() { return this._size; }, 
    set size(val) { this._size = val; }, 
} 

for (var p in test) { 
    console.log(p) 
} 

que emite solamente: (. No iterar los captadores o fijadores)

size