SOURCE

let user = {
    name: '',
    age: '',
}


function observe(obj){
    Object.keys(obj).forEach(key=>{
        defineProperty(obj, key, obj[key])
    })
}

const defineProperty = function(obj, key, val){
    Object.defineProperty(obj, key, {
        get(){
            console.log('执行了get')
            return val
        },
        set(newVal){
            console.log(`修改${key}为${newVal}`)
            val = newVal;
        }
    })
}

observe(user);

user.name = '张三'
console.log(user.name)
//这里设置新属性
user.sex = '男'
console.log(user.sex)
//这里对新属性进行修改，没有触发set函数，所以说无法监听新增加的属性
user.sex = '女'
console.log(user.sex)

let person = {
    name: '',
    age: ''
}

let handler = {
    get(obj, key){
        console.log('proxy执行了get')
        return key in obj?obj[key]:undefined
    },
    set(obj, key, val){
        console.log(`proxy 修改 ${key} 为 ${val}`)
        obj[key] = val;
        return true;
    }
}
const proxyUser = new Proxy(person, handler)

proxyUser.name = '李四'
//新增加的属性也能触发set
proxyUser.sex = '男'