zoukankan      html  css  js  c++  java
  • [ES6] Proxy

    What a Proxy does is handle communication for an Object.

    To create a proxy object, we use the Proxy constructor - new Proxy();. The proxy constructor takes two items:

    • the object that it will be the proxy for
    • an object containing the list of methods it will handle for the proxied object

    The second object is called the handler.

    The simplest way to create a proxy is to provide an object and then an empty handler object.

    var richard = {status: 'looking for work'};
    var agent = new Proxy(richard, {})

    The example above doesn't actually do anything, what make Proxy useful is the handler object, in the example above, they didn't give any methods to it.

    The handler object is made up of a methods that will be used for property access.

    Get Trap

    const richard = {status: 'looking for work'};
    const handler = {
        get(target, propName) {
            console.log(target); // the `richard` object, not `handler` and not `agent`
            console.log(propName); // the name of the property the proxy (`status` in this case) is checking
        }
    };
    const agent = new Proxy(richard, handler);
    agent.status; // logs out the richard object (not the agent object!) and the name of the property being accessed (`status`)

    Accessing the Target object from inside the proxy

    const richard = {status: 'looking for work'};
    const handler = {
        get(target, propName) {
            console.log(target);
            console.log(propName);
            return target[propName];
        }
    };
    const agent = new Proxy(richard, handler);
    agent.status; // (1)logs the richard object, (2)logs the property being accessed, (3)returns the text in richard.status

    Having the proxy return info, directly

    const richard = {status: 'looking for work'};
    const handler = {
        get(target, propName) {
            return `He's following many leads, so you should offer a contract as soon as possible!`;
        }
    };
    const agent = new Proxy(richard, handler);
    agent.status; // returns the text `He's following many leads, so you should offer a contract as soon as possible!`

    With this code, the Proxy doesn't even check the target object, it just directly responds to the calling code.

    Set Trap

    The set trap is used for intercepting code that will change a property. The set trap receives: the object it proxies the property that is being set the new value for the proxy.

    const richard = {status: 'looking for work'};
    const handler = {
        set(target, propName, value) {
            if (propName === 'payRate') { // if the pay is being set, take 15% as commission
                value = value * 0.85;
            }
            target[propName] = value;
        }
    };
    const agent = new Proxy(richard, handler);
    agent.payRate = 1000; // set the actor's pay to $1,000
    agent.payRate; // $850 the actor's actual pay

    In the code above, notice that the set trap checks to see if the payRate property is being set. If it is, then the proxy (the agent) takes 15 percent off the top for her own commission! Then, when the actor's pay is set to one thousand dollars, since the payRate property was used, the code took 15% off the top and set the actual payRate property to 850;

  • 相关阅读:
    简述虚拟打印功能的实现方法。
    什么是spool系统,什么是预输入,什么是缓输出?
    什么是虚拟设备技术,什么是虚拟设备,如何进行虚拟设备分配?
    什么是共享设备,对共享设备如何分配?
    什么是独占设备,对独占设备如何分配?
    对I/O设备分配的一般策略是什么?
    maven+nexus setting.xml配置(收藏)
    MySQL自动化安装(双主多从读写分离)
    Shell常用操作
    shell中的比较语句
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7899230.html
Copyright © 2011-2022 走看看