【javascript】实现给所有对象增加get与set操作

背景

• 上一篇是递归深拷贝，这次这个有点类似，跟vue里给所有对象加get和set一样

思路

• 递归方式和深拷贝差不多，就是如果值仍然是个对象的话，需要遍历里面的值，然后再进行加getset。另外还有设置值的时候，如果设置的是个对象，那么也拿去递归，把对象的值加上getset

代码

let obj={
    name:'yehuozhili',
    age:{11:23}
}
function observer(obj){
    if(typeof obj !=='object'){
        return
    }
    for(let i in obj ){
        resolveGetSet(obj,i,obj[i])
    }
}
function resolveGetSet(obj,key,value){
    observer(value)
    Object.defineProperty(obj,key,{
        enumerable:true,
        configurable:true,
        get(){
            return value
        },
        set(newVal){
            update()
            value = newVal
            observer(newVal)
        }
    })
}
function update(){
    console.log('更新');
}
observer(obj)
obj.age[11]=12
console.log(obj.age[11]);
obj.age[11]={32:5}
console.log(obj.age[11]);

思考

• 这东西有很多缺点
• 第一、它性能比较差
• 第二、如果传入的是数组就比较坑爹而且毫无意义。
• 第三、如果属性上不存在这个值然后去更新，不会触发更新。
• 此方法用proxy改写解决缺点，放到下一篇