object.defineProperty中set赋值为啥可以实现

Question

var obj = { name: 2, age: 3}
   function react ( obj, property, value) {
        var description = {
            get () { return value},
            set (newValue) { 
                return value = newValue }
        }
        Object.defineProperty(obj, property, description)
   }
   react(obj, 'name', obj['name'])
   react(obj, 'age', obj['age'])

其中的value = newValue,对形参的赋值，应该改变了它的指向，应该和obj['name']失去了联系，为啥赋值可以改变obj['name']的值。

Answer 1

你说的没错，赋值确实使得内部的 value 与原来的 obj['name'] 失去了联系。

但是这段代码能工作的原因，和你 react 函数的第三个参数是否传 obj['name'] 没有关系。

1. 首先要弄明白 defineProperty 是干什么的，里面的 getter / setter 是如何工作的
2. 然后需要明白，getter/setter 共用了 value 这个内部变量，尽管这个变量是在参数列表中定义的。它的本质和内部定义的变量没有区别。

var obj = { name: 2, age: 3}
function react ( obj, property, value) {
    var description = {
        get () { return value},
        set (newValue) { 
            return value = newValue }
    }
    Object.defineProperty(obj, property, description)
}
react(obj, 'name', 'aaa') // 直接传字符串
react(obj, 'age') // 甚至不传
console.log(obj.name) // aaa
obj.age = 40
console.log(obj.age) // 40

Answer 2

老生常谈的闭包问题，闭包关联的是变量，不是变量的值。要想“和obj['name']失去了联系”可以这样修改下getter函数：

function react ( obj, property, value) {
    var description = {
        get: ((value) => {
            return () => value;
        })(value),
        set (newValue) {
            return value = newValue }
    }
    Object.defineProperty(obj, property, description)
}
react(obj, 'name', obj['name'])
obj.name = 1222;
console.log(obj.name) // 2