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;

  • 相关阅读:
    ASP.NET Web开发框架之二 数据输入窗体
    针对HTML5的更新和Unobtrusive Validation
    框架:从MVC到开放API
    使用SSIS创建同步数据库数据任务
    MVC里的Filters
    类型构造器也称为静态构造器,类构造器,或类型初始化器
    铁道部新客票系统设计(二)
    深入浅出SQL Server中的死锁
    你所能用到的数据结构(一)
    python网络编程学习笔记(6):Web客户端访问
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7899230.html
Copyright © 2011-2022 走看看