ES6 proxy代理与 setter,getter方法的区别

setter 当获取指定属性时调用

getter获取指定属性时调用

 let ownProp = {
        _name: '鸡桑',
        age: '两年半',
        set name(value) {
            console.log('修改了名字');
            this._name = value;
        },
        //名字不能与setter,getter里的一致
        get name() {
            console.log('获取了名字');
            return this._name;
        }
    }

proxy代理,对目标调用属性方法等都会触发

 let managerId = ['020609']; //设立一个管理员id库
 let handler = {//设立一个处理方式
        get: function (target, key) {//获取属性时触发
            return target[key];//返回目标值
        },
        set: function (target, key, value) {//设置属性时触发
            let id = prompt('请输入你的管理员ID');  //输入id
            //判断输入的id是否为管理员id   正确触发修改       不符合触发弹窗
            managerId.includes(id) ? target[key] = value : alert('仅限管理员修改')
        }
    };
//                 这个传给target 这个传给key
let proxy = new Proxy(ownProp, handler);
let proxy2 = new Proxy(ownProp, handler);
proxy.name = '鸡哥';  //代理修改
console.log(proxy.name); 

setter与getter以及porxy代理都能监听属性方法的修改与获取,不过setter与getter仅限指定的属性

proxy监听全部,并且两者并不冲突,可以多重监听;一定程度上保证安全性;