javascript - 函数参数传值，如何通过Object.defineProperty劫持一个对象的属性

Question

当我学习 Vue 中的 react 性时，如果函数参数传递值，我无法理解 react 性是如何实现的。

//实际代码

var obj = {a: 'aa'}
function reactive(obj, key, value) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            return value
        },
        set(val) {
            value = val
        }
    })
}
function observe(obj) {
    Object.keys(obj).map((key, index) => {
        reactive(obj, key, obj[key])
    })
}
observe(obj)
obj.a //'aa'
obj.a ='bb' //'bb'

//错误码

var obj = {a: 'aa'}
function reactive(obj, key) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get() {
            return obj[key]
        },
        set(val) {
            obj[key] = val
        }
    })
}
function observe(obj) {
    Object.keys(obj).map((key, index) => {
        reactive(obj, key)
    })
}

observe(obj)
obj.a //VM1649:6 Uncaught RangeError: Maximum call stack size exceeded

当我通过 'obj[key]' 设置值时，它给出了一个 RangeError

//示例代码

var obj = {a: 'aa'}
function reactive(obj, key, value) {
   value = 'bb'
}
function observe(obj) {
    Object.keys(obj).map((key, index) => {
        reactive(obj, key, obj[key])
    })
}
observe(obj)
obj.a //'aa'

但是，示例代码显示，我们不能通过求值来改变对象的值

Answer 1

错误代码中，当你尝试获取obj[key]时，会一次次触发obj[key]的getter，所以就是这个原因超出最大调用堆栈大小 显示。以正确的方式，您应该将值作为函数 reactive 中的第三个参数传递。