proxy 的理解

proxy 的理解

const p = new Proxy(target, handler)
参数一，代理的目标对象，
参数2，代理的处理对象

const person = {
    name: 'joy',
    age: 20
}
const personProxy = new Proxy(person, {
    //监视属性读取
    //target目标对象，property外部访问对象的属性名
    get(target, property){
        //判断是否存在要访问的属性
        return property in target ? target[property] : 'default'
    },
    //监视属性设置
    //target目标对象，property外部访问对象的属性名，value要写入的属性值
    set(target, property, value){
        //属性类型判断验证
        if(property === 'age'){
            if(!Number.isInteger(value)){
                throw new TypeError(`${value} is not an int`)
            }
        }
        //设置属性
        target[property] = value;
    }
})

proxy与object.defineProperty

object.defineProperty只能监听到对象属性的读写
Proxy能监听到更多对象的操作

1.可以监听到读写以外的操作，如删除属性

const person = {
    name: 'tom',
    age: 20
}

const personProxy = new Proxy(person, {
    deleteProperty(target, property){
        console.log('delete', property);
        delete target[property]
    }
})

delete personProxy.age;

2.Proxy可以很方便的监听数组操作

const list = [];
const listProxy = new Proxy(list, {
    set(target, property, value){
        console.log('set', property, value);
        target[property] = value;
        return true //表示设置成功
    }
})

listProxy.push(100);

3.Proxy不需要侵入对象

-------Object.defineProperty-------
const person = {}
Object.defineProperty(person, 'name', {
    get(){
        console.log('name 被访问');
        return person._name;
    },
    set(value){
        console.log('name 被设置');
        person._name = value;
    }
})
Object.defineProperty(person, 'age', {
    get(){
        console.log('age被访问');
        return person._age;
    },
    set(value){
        console.log('age被设置');
        person._age = value;
    }
})
person.name = 'jack';

------------Proxy----------------
const person2 = {
    name: 'tom',
    age: 20
}

const personProxy = new Proxy(person2,{
    get(target, property){
        console.log('get', property)
        return target[property]
    },
    set(target, property, value){
        console.log('set', property, value);
        target[property] = value;
    }
})
personProxy.name = 'jack';