const obj = {
data1: {
data2: {
name: "小强",
age: 20
},
name: "小刚"
},
name: "小明",
age: 18
}
//以这种obj.data1.data2.name形式访问和访问data2.name效果一样,前提是获得data2的地址然后进行访问name属性
function observer(target) {
//判断传入参数是否为对象
if (typeof target !== "object" || target === null) return
for (let key in target) {
//属性为对象则继续observe
let res = target[key]
observer(res) //对属性值进行observer递归,若属性值为非对象则返回属性值,否则进行observer处理
Object.defineProperty(target, key, {
get() {
console.log(key + "属性被读取了");
return res
},
set(newValue) {
observer(newValue) //如果新value是对象,则继续监听
if (newValue !== res) {
console.log(key + "属性被修改了");
res = newValue
}
}
})
}
}
observer(obj)
obj.data1.name //依次打印data1属性被读取了 name属性被读取了
//哈默链接:https://www.bilibili.com/video/BV18p4y167We
//结论:data中的所有初定义属性都应该被Object.defineProperty进行监听。只不过针对对象属性来说,还需要做的一步是:对对象属性进行
//Object.defineProperty深层次监听。另外在修改属性之的时候,对于newValue也要进行判断,若newValue为对象,则需要进行 Object.defineProperty深
//层次监听。