zoukankan      html  css  js  c++  java
  • es6.代理 proxy

    <script>
        var person = {
            'name': '张三',
            'age': 20
        }
        var pro = new Proxy(person, {
            get(target, property) {
                return '李四'
            }
        })
        console.log(pro.name)
        console.log(pro.age)
    
    
    
    
        let zhang = {
            location: '市区',
            housePrice: '20000',
            time: '2017-08-05'
        } 
        let intermediaryAgent = new Proxy(zhang, {
            get(target, property) {
                console.log(target)
                console.log(property)
                if (property == 'housePrice') {
                    return target[property] * 1.2
                } else if (property == 'location') {
                    return '位于市区,购物方便'
                }
                return target[property]
            }
        })
        console.log(intermediaryAgent.location);
        console.log(intermediaryAgent.housePrice);
        console.log(intermediaryAgent.time);
    </script>

    2、set方法   

    参数 target当前对象 property 设置的那个属性 value 代表给属性赋的值是
    作用,给属性值处理后设置值
    <script>
        // var bankAccount = { 'RMB': 1000, 'dollar': 0 };
        // var banker = new Proxy(bankAccount, {
        //     get: function (target, property) {
        //         if (target[property] > 0) {
        //             return target[property];
        //         } else {
        //             return '余额不足'
        //         }
        //     },
        //     set: function (target, property, value) {
        //         if (!Number.isInteger(value)) {
        //             return '请设置正确的数值'
        //         }
        //         target[property] = value
        //     }
        // })
        // console.log(banker.RMB)
        // console.log(banker.dollar)
      
        let account = {
            balance: 10000,
            phone: '12345678912',
            name: 'zhgr',
            age: undefined
    
        }
        let bank = new Proxy(account, {
            get(target, property) {
                return target[property]
            },
            // target 代表代理对象
            // property 代表我们设置的是哪个属性
            // value 代表给这个属性赋的值是什么
            set(target, property, value) {
                console.log(target);
                console.log(property)
                console.log(value);
                if(property =='drawMoney'){
                    if(target.balance>value){
                        target.balance  =target.balance-value
                    }else{
                        alert ('余额不足')
                    }
                }
            },
            
        })
        bank.drawMoney = 20000;
        bank.drawMoney = 5000;
        console.log(bank.balance)
    
    
        
        
        
        </script>

    3、ownKeys:截获 只给该代理相应属性,其他属性获取不到

    ownKeys: function (target) {
        return balance;//截获 只给该代理一个参数,其他属性获取不到
    },
    console.log(Object.keys(bank))

    4、has()方法用于是判断是否含有指定的键值对。有,就返回true。否则返回false。

    has(target,property){
                if (target[property] == undefined) {
                    return false
                } else {
                    return true
                }
            }
        console.log('age' in bank);
        console.log('name' in bank);
     

    5、apply方法 ,函数可以被代理。使用apply调用。

    let fn = function(){
        console.log("被代理函数")
    }
     
    let fn1 = new Proxy(fn,{
        apply: function(){
            console.log("代理")
        }
    })
     
    fn1();//代理

    6、Proxy.revocable方法

    (可废止的,可撤回的;)函数来实现,它会返回一个对象,对象中含有一个proxy属性,它就是Proxy的代理实例对象;还有一个revoke属性,它是一个方法,用于取消代理

    let person = {"name":"张三"};
    //处理程序
    let handLe = {
        get : function(target,prop){
            return "李四";
        }
    };
     
    //使用Proxy.revocable()进行代理
    let obj = Proxy.revocable(person,handLe);
     
    console.log(obj.proxy.name);//李四
     
    //revoke 取消代理
    obj.revoke();
    console.log(obj.proxy.name);//报错代理被取消
  • 相关阅读:
    无法识别的属性“targetFramework”。请注意属性名称区分大写和小写。错误解决的方法
    OpenGL 4 : 一个漂亮的心 For you, My Love
    request.getParameterValues与request.getParameter的差别
    Mac下搭建quick cocos2d-x编译环境
    【Github教程】史上最全github用法:github入门到精通
    OSI七层模型具体解释
    Android Service 服务(一)—— Service
    几种更新(Update语句)查询的方法
    epoll使用具体解释(精髓)
    SSL连接建立过程分析(1)
  • 原文地址:https://www.cnblogs.com/guirong/p/13605062.html
Copyright © 2011-2022 走看看