Author: CodeOz
Translator: front end Xiaozhi
Source: dev

There are dreams and dry goods. Wechat search [Daqian world] pays attention to this bowl washing wisdom who is still washing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.

These two functions appear in ES6, and they cooperate very well!

Proxy

proxy is a foreign object. It has no properties! It encapsulates the behavior of an object. It requires two parameters.

const toto = new Proxy(target, handler)

target: refers to the object to be represented / wrapped
handler: is the configuration of the agent, which will intercept operations on the target (get, set, etc.)

Thanks to the proxy, we can create such traps:

const toto = { a: 55, b:66 }
const handler = {
 get(target, prop, receiver) {
   if (!!target[prop]) {
     return target[prop]
    }
    return `This ${prop} prop don't exist on this object !`
  }
}

const totoProxy = new Proxy (toto, handler)

totoProxy.a // 55
totoProxy.c // This c prop don't exist on this object !

The "method" of each internal object has its own objective function

The following is a list of object methods, which is equivalent to entering the Target:

The parameters of the objective function can be changed according to different functions.

For example, for the get function (target, prop, receiver(proxy itself)), and for the set function (target, prop, value (to set), receiver)

example

We can create private properties.

const toto = {
   name: 'toto',
   age: 25,
   _secret: '***'
}

const handler = {
  get(target, prop) {
   if (prop.startsWith('_')) {
       throw new Error('Access denied')
    }
    return target[prop]
  },
  set(target, prop, value) {
   if (prop.startsWith('_')) {
       throw new Error('Access denied')
    }
    target[prop] = value
    // The set method returns a Boolean value
    // So that we know whether the value has been set correctly!
    return true
  },
  ownKeys(target, prop) {
     return Object.keys(target).filter(key => !key.startsWith('_'))
  },
}

const totoProxy = new Proxy (toto, handler)
for (const key of Object.keys(proxy1)) {
  console.log(key) // 'name', 'age'
}

Reflect

Reflect is a static class, which simplifies the creation of proxy.

Each internal object method has its own Reflect method

❓ Why use it? Because it works very well with proxy! It accepts the same parameters as proxy!

const toto = { a: 55, b:66 }

const handler = {
  get(target, prop, receiver) {
   // Equivalent target[prop]
   const value = Reflect.get(target, prop, receiver)
   if (!!value) {
      return value 
   }
   return `This ${prop} prop don't exist on this object !` 
  },
  set(target, prop, value, receiver) {
     // Equivalent target[prop] = value
     // Reflect.set returns boolean
     return Reflect.set(target, prop, receiver)
  },
}

const totoProxy = new Proxy (toto, handler)

So you can see that the Proxy and reflect APIs are very useful, but we won't use them every day. It may be good to use them in order to make traps or hide the properties of some objects.

If you use the Vue framework and try to modify the props object of the component, it will trigger the Vue warning log. This function uses Proxy:)!

The bugs that may exist after code deployment cannot be known in real time. Afterwards, in order to solve these bugs, we spent a lot of time on log debugging. By the way, we recommend a useful BUG monitoring tool Fundebug.

Original text: https://dev.to/codeoz/proxy-r...

communication

There are dreams and dry goods. Wechat search [Daqian world] pays attention to this bowl washing wisdom who is still washing dishes in the early morning.

This article GitHub https://github.com/qq44924588... It has been included. There are complete test sites, materials and my series of articles for the interview of front-line large factories.