Proxy的实现

proxy作用:

1、代理
2、解决跨域

案例一


var house = {
        price: 1000000,
        size: 120,
        info: "河北科技大学附近"
    }
    // Proxy(要代理的对象,{包含很多方法})
    var housePro = new Proxy(house, {
        get(target, property) {
            // 代理的对象
            // console.log(target);
            // 对象中的属性
            // console.log(property);
            if (property == "info") {
                return '在河北科技大学附近,上大学不用考试,直接上学'
            }
            return target[property]
        },
        set(target, property, value) {
            console.log(value);
            target[property] = value
        },
        // ownKeys拦截操作,拦截过滤Object.Keys()对对象的属性遍历
        ownKeys() {
            return ['size', 'price']
        },
        // has()拦截操作:拦截key in object的操作,结果会返回一个布尔值。
        has(target, property) {
            // console.log(target);
            // console.log(property);
            // console.log(target[property]);
            // return false
            if (target[property] == undefined) {
                return false
            } else {
                return true
            }
        }
    })
    console.log(housePro.price);
    console.log(housePro.size);
    console.log(housePro.info);

    housePro.price = 1100000
    console.log(housePro.price);

    console.log(Object.keys(housePro));

    console.log('size' in housePro);
    console.log('info' in housePro);
    console.log('info1' in housePro);

案例二


function fn() {
        console.log('我是现在没有代理的函数');
    }
    var fn_1 = new Proxy(fn, {
        apply() {
            console.log('我被代理了');
        }
    })
    fn_1()
案例三

 // 如果创建了代理之后又想取消代理的话,我们可以用Proxy.revocable( )(可废止的,可撤回的;)函数来实现
    var obj1 = {
        name: 'zs'
    }
    var houseProxy = Proxy.revocable(obj1, {
        get(target) {
            console.log(target);
            return '12312312'
        }
    })
    console.log(houseProxy);
    console.log(houseProxy.proxy.name);
    // 取消代理
    houseProxy.revoke()
    console.log(houseProxy);

    console.log(houseProxy.proxy.name);  //Cannot perform 'get' on a proxy that has been revoked

    // console.log(houseProxy.info);


var obj = {
        name: 'zs',
        age: 18
    }
    // 判断对象中有没有判断的这个属性名
    console.log("name" in obj);
    console.log("age" in obj);
    console.log("age1" in obj);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值