I come across some wired code when I was learning the Vue Dependency Tracking:
function convert(obj) {
Object.keys(obj).forEach(key => {
let internalValue = obj[key]
Object.defineProperty(obj, key, {
get() {
console.log(`getting key "${key}": ${internalValue}`)
return internalValue
},
set(newValue) {
console.log(`setting key "${key}" to: ${newValue}`)
internalValue = newValue
console.log(obj);
}
})
})
return obj
}
// test
let o = {a: 'hello',b:'world'};
let convO = convert(o);
convO.b = 'javascript';
// in normal condition, change a pointer won't change the target:
let p = o['b'];
p = 'woola'
console.log('normal condition', o);
Inside the forEach callback function, we firstly define a variable internalValue as a pointer, which point to obj[key]. Secondly, we changed that pointer. Why the pointed target is mutated? It doesn't make any sense.