New features of ES6 Proxy proxy

Proxy, as its name implies, is used to set a proxy between an object and its property value. Multiple operations, such as getting the value of the object or setting the value of the object, and instantiation, will be blocked. After this layer, we can handle it uniformly. We can think of it as a "proxy".

let obj = new Proxy(target, handler);

Proxy is a constructor that uses new Proxy to create a proxy. Its first parameter, target, is the target object proxy to wrap. It can be any type of object, including a native array, function or even another proxy. The second parameter handler is also an object, which returns the wrapped proxy. for instance:

//Represented object
let item = {
    userName:'don',
    age:18
}
//Surrogate object
let proxyItem = new Proxy(item, {
    get : function( target , prop ) {
        console.log("I want to get the value");
        return target[prop];
    },
    set : function( target, prop, value) {
        console.log("I'm going to set the value");
        target[prop] = value;
        return true
    }
});
obj.userName = 'alice'; // I'm going to set the value
console.log(obj.age) ; // I want to get the value
Attribute test
let product = {
    productPrice: 200
};
let obj = new Proxy(product, {
    set: function (target, key, value) {
        if(value<100){
            throw new RangeError('The price is too low');
        }else if(value>300){
            throw new RangeError('The price is too high');
        }
        target[key] = value;
        return true
    }
});
obj.productPrice = 301; // RangeError price is too high
obj.productPrice = 99; // RangeError price is too low
obj.productPrice = 120;

When you want to modify an item, you will enter the get or set of the proxy object to check whether the property can be read. If the condition is not met, an error will be thrown. Only after the verification is passed can the property be set on the object.

let product = {
    productPrice:200
};
let obj = new Proxy(product, {});
obj.productPrice = 300;
console.log(obj) // { productPrice:300 }
console.log(product) // { productPrice:300 }

If get or set is not set for the Proxy, it is equivalent to that the Proxy has not been set.

Setting up multiple proxies
let product = {
    productPrice:200
};
let productProxy1 = new Proxy(product, {
    set:function(target,key,value){
        if(value < 100){
            throw new RangeError("The price is too low")
        }
        target[key] = value;
        return true;
    }
});

let productProxy2 = new Proxy(product,{
    set:function(target,key,value){
        if(value>300){
            throw new RangeError("The price is too high")
        }
        target[key] = value;
        return true;
    }
})
productProxy1.productPrice = 102;
productProxy2.productPrice = 14;
console.log(product) //{ productPrice:14 }

An object supports setting multiple proxies at the same time. Different proxies are only valid for their own validation conditions. For example, the product proxy1 in the above example will check whether the modified product price is less than 100. After the modification, enter the product proxy2 verification. The product proxy2 only verifies whether it is greater than 300. At this time, the incoming 14 meets the requirement of product proxy2 and passes the verification. However, the verification before productProxy1 fails, so pay attention to this problem when verifying multiple proxies.

Second parameter

The second parameter of proxy is an object. The parameter of the object is the following list. Proxy provides more interfaces. With different parameters, we can intercept the code and reprocess it. Reference link

  • handler.getPrototypeOf()
  • handler.setPrototypeOf()
  • handler.isExtensible()
  • handler.preventExtensions()
  • handler.getOwnPropertyDescriptor()
  • handler.defineProperty()
  • handler.has()
  • handler.get()
  • handler.set()
  • handler.deleteProperty()
  • handler.ownKeys()
  • handler.apply()
  • handler.construct()
19 original articles published, praised 0, visited 207
Private letter follow

Tags: Attribute less

Posted on Sun, 08 Mar 2020 08:29:54 -0400 by test