当前位置：网站首页>Proxy in ES6

Proxy in ES6

2022-07-01 19:35:00 【SignalFire】

Proxy： Agent , Change the default access behavior of objects ; Add interception before the access behavior of the object , adopt Proxy The access behavior of the instance must be intercepted ; In interception, you can Set interception conditions

p() For custom functions , In the following text p() All call this function

        let p = function(){
           console.log(...arguments);
       }

Catalog

Interceptor

One 、 Array proxy

Two 、 Object agent

3、 ... and 、 Function proxies

Four 、class agent

5、 ... and 、ES5 Agent in

Interceptor

Interceptor	effect
get	Block the reading of object properties , Such as obj.key,obj['key'], Return property value
set	Setting of interception property , Returns a Boolean value
has	Intercept key in obj The operation of , Returns a Boolean value
ownKeys	Interception traversal such as ： for in loop Object.getOwnPropertyNames(obj); Object.getOwnPropertySymbols(obj); Object.keys(obj);

One 、 Array proxy

1、 Block the operation of intercepting values

2、 Intercept setting operation , When an array is assigned a value or an element is added, an event such as ：arr.push(xxx),arr[0] = xxx

let arr = [1,2,3,4,5];
arr = new Proxy(arr,{
// If the element has a return value , Otherwise return to error
get(target,prop){//target Is the object of the proxy , Here is the array arr;prop Index here
return prop in target ? target[prop] : 'error';
        },
// Triggered when the value is set
set(target,prop,val){
if(typeof val === 'number'){// Is a numeric type addition , Otherwise, the report will be wrong ,
target[prop] = val;// Conditions can be modified according to actual needs
                        return true;
                }else return false;
        }
})

Two 、 Object agent

1、 Whether interception exists, such as in

        let age = {
           min:0,
           max:143
       }
       age = new Proxy(age,{
           has(target,prop){
               return prop >= target.min && prop <= target.max;
           }
       })
       p(23 in age);
       p(144 in age);

2、 Interception traversal such as ：

        for in loop
       Object.getOwnPropertyNames(obj);
       Object.getOwnPropertySymbols(obj);
       Object.keys(obj);

        let user = {
           name:"Asia",
           age:23,
           _password:'666'
       }
       user = new Proxy(user,{
           ownKeys(target){
// Put all the keys of the object with '_' The first key is filtered out , Password attributes are filtered here
               return Object.keys(target).filter(key => !key.startsWith('_'));// You can customize the interception conditions as needed
           }
       });
       for(let key in user){
           p(key);
       }

3、 Intercept some attributes and all operations

        let u = {
           name:'Asia',
           age:23,
           _password:'666'
       }
       u = new Proxy(u,{
           set(obj,key,val){
               if(key.startsWith('_')){
                   throw new Error(' Do not modify the ');
               }else{
                   obj[key] = val;
               }
           },
           get(obj,key){
               if(key.startsWith('_')){
                   throw new Error(' inaccessible ');
               }else{
                   return obj[key];
               }
           },
           deleteProperty(obj,key){
               if(key.startsWith('_')){
                   throw new Error(' Not delete ');
               }else{
                   delete obj[key];
                   return true;
               }
           },
           ownKeys(obj,key){
               return Object.keys(obj).filter(key => !key.startsWith('_'));
           }
       })

       try{
           u._password = '000';
       }catch(err){
           p(err.message);
       };

       try{
           p(u._password);
       }catch(err){
           p(err.message);
       }

       try{
           delete u._password;

       }catch(err){
           p(err.message);
       }
       Object.keys(u).forEach(key => p(u[key]));

3、 ... and 、 Function proxies

Change the return value of the function

        let sum = (...args) => {
           let sum = 0;
           args.forEach(item => {
               sum += item;
           });
           return sum;
       }
       sum = new Proxy(sum,{
           apply(fn,ctx,args){
               return fn(...args) * 10;
           }
       });
       p(sum(1,2,3));//60
       p(sum.call(null,1,2,3));//60
       p(sum.apply(null,[1,2,3]));//60

Four 、class agent

Yes new To intercept

let User = class{
           constructor(name){
               this.name = name;
           }
       }
       User = new Proxy(User,{
           construct(cls,args,newCls){
               p('construct Intercepting ');
               return new cls(...args);
           }
       });
       p(new User('Asia'));