(精华)2020年7月5日 JavaScript高级篇 ES6(Proxy)

// let p = new Proxy(target,handel)
// tearget: 用Proxy包装的目标对象
// handel:一个对象proxy代理操作的对象
// ----------get用于对象属性读取的拦截 可以接收三个参数 目标对象 属性名 proxy实例本身(可选)------------------
// 判断一个对象的属性是否存在
let person = {
    name: 'tony'
}
let proxy = new Proxy(person, {
    get: function (target, property) {
        // console.log(target)
        // console.log(property)
        return target[property]
    }
})
console.log(proxy.name);
// ------------set 拦截对象赋值的操作 目标对象 属性名 属性值 proxy实例本身-------------
// 对对象赋值的年龄进行一个判断
let obj = {}
let setVid = {
    set: function (object, prop, value) {
        Reflect.set(object, prop, value)
    }
}
let p = new Proxy(obj, setVid)
p.age = 200
console.log(p.age);
//------------案例----------------
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设置删除操作 ------------------
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 拦截 是否有某个属性的 -----------------------
// 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);

你可能感兴趣的:(#,Javascript,高级篇,javascript,前端)