当我学习 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'
但是,示例代码显示,我们不能通过求值来改变对象的值
最佳答案
错误代码中,当你尝试获取obj[key]
时,会一次次触发obj[key]
的getter,所以就是这个原因超出最大调用堆栈大小
显示。以正确的方式,您应该将值作为函数 reactive
中的第三个参数传递。
关于javascript - 函数参数传值,如何通过Object.defineProperty劫持一个对象的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58514626/