本来想实现下vue的源码,结果刚开始就踩了个坑,记录下。
let obj = {
name: 'Han'
}
Object.defineProperty(obj, 'name', {
get() {
return obj.name
}
})
控制台打了下报错说是栈溢出。
原因是get方法不能直接返回obj.name,这样相当于又调用了一次get方法,然后继续返回obj.name继续调用get方法...
解决的方法
1、数据代理。
let obj = {
_name: 'Han'
}
Object.defineProperty(obj, 'name', {
get() {
return obj._name
},
set(newVal) {
obj._name = newVal
}
})
2、包多一层函数,把需要修改(输出)的变量以函数内私有变量的形式存储。
let obj = {
name: 'Han'
}
function reactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
return val
},
set(newVal) {
val = newVal
}
})
}
reactive(obj, 'name', obj.name)