Proxy和Reflect

1：监听对象的第一种方式 Object.defineProperty 

const obj = {
    name: 'tyy',
    age: 20
}
Object.keys(obj).forEach((key) => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
        get: function() {
            console.log(`监听到了获取${key}`);
            return value
        },
        set: function(newvalue) {
            console.log(`监听到了设置${key}`);
            value = newvalue
        }
    })
})
console.log(obj.age);
obj.age = 18
console.log(obj.age);

这种方式虽然能监听，但是它的缺点不能新增属性或者删除属性

2：第二种监听对象的方式 一个类-----Proxy 使用方法 new一个Proxy(对象名字，{}) 相较于第一种方式的优点在于可以删除修改等 Proxy 中文名字也叫代理，可以避免操作原对象。

const obj = {
        name: 'tyy',
        age: 20
    }
    //Proxy的基本使用
const objProxy = new Proxy(obj, {
    get: function(target, key) {
        console.log(`监听了获取${key}`, target);
        return target[key]

    },
    set: function(target, key, newvalue) {
        console.log(`监听了设置${key}`, target);
        target[key] = newvalue
    },
    //监听in
    has: function(target, key) {
        console.log(`监听了in ${key}`, target);
        //返回key
        return key in target
    },
    deleteProperty: function(target, key) {
        console.log(`监听了delete ${key}`, target);
        delete target[key]
    }
})
console.log(objProxy.age);
objProxy.age = 18
console.log(objProxy.age);
console.log(obj.age);
//in的监听
console.log('age' in objProxy);
//delete的监听
delete objProxy.name
console.log(obj.name);

 

 传的target是对象，key是属性名

3：Peoxy的construct和apply----应用于函数对象

function foo() {
    console.log('foo');
    return 'foo'
}
const fooProxy = new Proxy(foo, {
    apply: function(target, thisArg, otherarg) {
        console.log(`函数的apply侦听`);
        console.log(target, thisArg, otherarg);
        return target.apply(thisArg, otherarg)
    },
    construct: function(target, argArray, newTarget) {
        console.log(`函数的construct侦听`, target, argArray, newTarget);
        return new target()
    }
})
fooProxy.apply({}, ['abc', 'bcd', 'cba'])
new fooProxy('aaa', 'bbb')

 

 4：Reflect 新增的一个对象，里面有很多操作javascript的方法，类似于Object的里面的一些方法，新增这个也是为了不让Object这个构造函数承担那么多，具体使用

const obj = {
        name: 'tyy',
        age: 20
    }
    //Proxy的基本使用
const objProxy = new Proxy(obj, {
    get: function(target, key) {
        console.log(`监听了获取${kRRey}`, target);
        return Reflect.get(target, key)

    },
    set: function(target, key, newvalue) {
        console.log(`监听了设置${key}`, target);
        return Reflect.set(target, key, newvalue)
    },
    //监听in
    has: function(target, key) {
        console.log(`监听了in ${key}`, target);
        //返回key
        return Reflect.has(target, key)
    },
    deleteProperty: function(target, key) {
        console.log(`监听了delete ${key}`, target);
        return Reflect.deleteProperty(target, key)
    }
})
console.log(objProxy.age);
objProxy.age = 18
console.log(objProxy.age);
console.log(obj.age);
//in的监听
console.log('age' in objProxy);
//delete的监听
delete objProxy.name
console.log(obj.name);

 

 

 注意Reflect可以把是否设置成果返回一个布尔值，例如上面result,相比之前可以监听到是否设置成功

 5：