Detailed es6 role in Proxy proxy object

Es6 newly added in the Proxy, then what does it do ah? Proxy intended for the agent, and es6 of Proxy is a proxy object, the proxy object sounds very vague feeling, where you explain the role Proxy proxy object.

Proxy main role is to be an object can intercept and read data, modify the filter protection.

We first use es3 way to achieve a demand, a conventional data, internal name, age, sex three attributes, name, age property is readable and writable, read only property but sex, unwritable

Analysis steps:

We can define a constructor, the internal data define a data, comprising three properties

We also exposed two methods, a get, a set

get used to read data, set used to write data to determine when writing data, if you want to set the sex of this property, we will give an error message

 var Person = function(){
      var data = {
        name:'monkey',
        age:18,
        sex:'男'
      }
      this.get = function(key){
        console.log(key)
        return data[key]
      }
      this.set = function(key,value){
        if(key!=='sex'){
          return data[key] = value
        }else{
          throw '该属性为只读属性'
        }
      }
    }
    var person = new Person;
    var name = person.get('name')
    person.set('sex','女')
    console.log(person.get('sex'))

　　

The final output:

We realized, name is readable and writable, sex but can not be modified

Then we'll use es5 way to achieve, es5 know this method to achieve defineProperty lot simpler

var person = {
  name:'monkey',
  age:30
}
Object.defineProperty(person,'sex',{
  writable:false,
  value:'男'
})
person.sex = '女'
console.log(person.sex)

　　

We set the sex attribute is not writable by defineProperty property

We will find that the end result does not modify or male success

Then we re-use Proxy es6 to achieve

var person = {
  name:'monkey',
  age:19,
  sex:'男'
}
var p1 = new Proxy(person,{
  get(target,key){
    console.log(target)
    console.log(key)
    return target[key]
  },
  set(target,key,value){
    if(key=='sex'){
      throw '不允许修改sex'
    }else{
      target[key] = value
    }
  }
})
p1.name
p1.sex = '女'

　　

We have to analyze the above code,

It defines a person data

Proxied by the new Proxy p1

Proxy first parameter is an object to be blocked, the second parameter is an object inside a subject get and set methods

p1 is to get through when reading data calls, get method takes two parameters, target data that is the target person, key data is read by p1 when the key
read data such as the above 20 lines of code, it will get triggered The method was as follows

When the method is set by the trigger setting data p1, three internal parameter, the first or the target, or second key, the third value is set to a value of

Then we can be judged by the key, if the key is to be set up on behalf of your sex sex gave an error message

Otherwise, by target [key] = value to the data set

The above is to use a Proxy, Proxy terms of relative es3 and es5 still feel very good, because you can do more processing logic in the set inside, and so on