ES6 Proxy的详解

Proxy 对象 get，set的应用

let handel = {
        get(target,key){
            console.log(key);
            if(key[0] === "_"){
                throw new Error('内部属性禁止外部访问')
            }
            return target[key]
        },

        set(target,key,value){
            target[key] = value
            // return true
        }
    }
    // 提示_属性是 内部属性禁止外部访问

    let target = {}

    let proxy = new Proxy(target,handel)

    proxy._prop = 'c'
    console.log(proxy._prop);

proxy设置删除操作

let person = {name:'张三'}
let handel  = {
    deleteProperty(target,key){
       console.log('不允许删除属性');
       // 这里面删除才是真正可以删除
       delete target[key]

    }
}

let proxy = new Proxy(person,handel)

delete proxy.name
console.log(proxy.name);

apply拦截 的是函数的调用

let target = function(){return '我是目标函数'}
let handel = {
    apply:function(){
        return '我是拦截你的'
    }
}
let p = new Proxy(target,handel)

console.log(p());

has拦截 的是属性的调用,可以是原型对象上的

let father = {
        name:'father'
    }
    let handel = {
        has(target,key){
            if(key[0] === '_'){
                return false;
            }
            return key in target
        }
    }
    let target = {_prop:'a',prop:'b'}
    target.__proto__ = father
    let proxy = new Proxy(target,handel)

    console.log('_prop' in proxy); 
    console.log('name' in proxy);

construct构造函数的使用

function Person(name){
        this.name = name
    }
    let person = new Person('tony')
    let proxy = new Proxy(Person,{
        construct:function(target,key){
            return {name:'Chris'}
            // return 123
            // 返回的一定要是一个对象
        }
    })

    console.log(new proxy('张三').name);

Reflect 的api 和proxy代理的api通用

let obj = {
    name:'Chris'
}

let result = Reflect.get(obj,'name')
console.log(result);

let obj = {
    get he(){
        return this.name + this.pro
    }
}

let re = {
    name:'tony',
    pro:'怕老婆'
}

let result = Reflect.get(obj,"he",re)
console.log(result);

补充代理解决跨域问题
webpack配置文件如下，在vue，react中都适用

 devServer:{
        proxy:{
            '/api':{
                target:'http://127.0.0.1:2000',
                pathRewrite: {
                    // 如果你不希望传递api给后台 就需要重写
                    "name.json": "rName.json"
                }
            }
        }
    },