“This is the fifth day of my participation in the Gwen Challenge.

Proxy literally means Proxy, and the official API usage manual is available in MDN

Proxy objects are used to create a Proxy for an object to intercept and customize basic operations (such as property lookup, assignment, enumeration, function calls, and so on).

We understand Proxy as agents in real life, and learn about Proxy through several common scenarios of selling goods.

A rookie agent

A rookie agent, looking confused, just doing it, but doing nothing.

const target = {
    who: "Who am I?.where: "Where am I?
};

const handler1 = {};

const proxy1 = new Proxy(target, handler1);

console.log(proxy1.who); // => Who am I?
console.log(proxy1.where); // => Where am I?

Copy the code

An agency that’s starting to know how to make money

Meng force, began to go on the road, the essence of the agent is to make money, so we will be unified to display the price for 1.5 times the cost price.

const originPrice = {
    water: 10.rice: 20
};

const handler2 = {
    get(target, key) {
        return target[key] * 1.5; }};const soldPrice = new Proxy(originPrice, handler2);

console.log(soldPrice.water); / / = > 15
console.log(soldPrice.rice); / / = > 30
Copy the code

An agent who is beginning to know how to handle inventory

Business is a very key point to manage inventory information, know the inventory to know when the good purchase, and into how much.

const quantity = {
    water: 5.rice: 3
};

const handler3 = {
    set(target, key, value) {
        target[key] = value;
        console.log(Updated `${key}The inventory for${value}`);
        return true; }};const quantitySet = new Proxy(quantity, handler3);

quantitySet.water = 15; // => Update water inventory to 15
quantitySet.rice = 13; // => Update rice inventory to 13

console.log(quantitySet.water); / / = > 15
console.log(quantitySet.rice); / / = > 13
Copy the code

One day, too busy meng force, accidentally inventory input is too large, resulting in the wrong quantity of goods. So we can also add an input constraint.

const quantity = {
    rice: 3
};

const handler3 = {
    set(target, key, value) {
        if (value > 100) {
            console.log(`${key}I'm afraid the inventory is not a mistake. Double check? `)return false;
        }
        target[key] = value;
        console.log(Updated `${key}The inventory for${value}`);
        return true; }}; . quantitySet.rice =101; // => I am afraid there is no mistake in rice's inventory. Double check?
console.log(quantitySet.rice); / / = > 3

Copy the code

An agent who began to understand the cover of goods

Good things firmly do not sell ~ cover first. To start profiteering.

const goods = {
    'Mineral water': 100.'moutai': 10._privateDVD: 10};const handler4 = {
    has(target, key) {
        if (key === 'moutai' || key.startsWith('_')) {
            console.log('I would never admit I have it.');
            return false;
        }
        console.log('There's a lot of there.');
        return Reflect.get(target, key); }};const sellGoods = new Proxy(goods, handler4);

console.log('moutai' in sellGoods); // false
console.log('_privateDVD' in sellGoods); // false
console.log('Mineral water' in sellGoods); // true
Copy the code

An agent for a loss-making clearance sale

Do not say, the flow of tears is his IQ tax.

const goodsInfo = {
    'saltWater': 100.'moutai': 1.'_privateDVD': 1
};

const readonlyKeys = ['moutai'.'_privateDVD'];

const sellGoods2 = new Proxy(goodsInfo, {
    deleteProperty(target, key) {
        if (readonlyKeys.includes(key)) {     
            throw new Error(`${key}How is it possible to clear the goods);
            return;
        }

        console.log(`delete: ${key}`);
        delete target[key];
        return true; }});console.log(sellGoods2.saltWater, goodsInfo.saltWater); / / = > 100 100
delete sellGoods2.saltWater; // => delete: saltWater
console.log(sellGoods2.saltWater, goodsInfo.saltWater); // => undefined undefined
// sellGoods2[' sellGoods2 ']; // => throw error
delete sellGoods2['_privateDVD']; // => throw error
        
Copy the code

The Proxy of the summary

Through the above several cases, I think we have a preliminary concept of Proxy Proxy road. Several handlers appear in this article

  • get handler
  • set handler
  • has handler
  • deleteProperty handler

Handlers are the most common types of Proxy handlers. We can encapsulate our own business logic after the original target on the Proxy.

Its powerful features are also directly used by VUE3, and performance is greatly improved.

But its biggest compatibility problem is that it is not supported by IE, which is why VUe3 abandoned IE.

Will you use a Proxy in your project?