手写 shallowReadonly 和 readonly

shallowReadonly

只读的实现比较简单，我们只要拦截到修改操作时，不把此变更反映到源对象上即可

const handler={
    get(target,key){
        console.log('get',key)
        return Reflect.get(target,key)
    },
    set(target,key,val){
        console.warn('can not set')
        return true
    },
    deleteProperty(target,key){
        console.warn('can not delete')
        return true
    }
}
function shallowReadonly(target){
    if(target && typeof target === 'object'){
        return new Proxy(target,handler)
    }else{
        return target
    }
}

如此一来，我们只能感知到最外层属性的变化，要实现 readonly，还需要将对象进行递归处理

function readonly(target){
    if(target && typeof target === 'object'){
        if(Array.isArray(target)){
            target.forEach((item,index)=>{
                target[index]=readonly(item)
            })
        }else{
            Object.keys(target).forEach((key)=>{
                target[key]=readonly(target[key])
            })
        }
        return new Proxy(target,handler)
    }else{
        return target
    }
}

对象不可直接遍历，可以通过Object.keys，Object.values()，Object.entries()来遍历