Proxy

Proxy

用于ES6的对象保护

首先我们先看一下ES3/ES5的对象代理过程

ES3（采用闭包处理）

var Person function() {
  // 实例化对象以后，是无法拿到data里面的数据的，达到数据保护的作用
    var data = {
      name:'es3',
    sex:'male',
    age:15
  }
  // 想要外界读取data里面的数据需要做出如下处理
    this.get = function(key) {
      return data[key]
  }
  // 想要外界改变data里面的数据需要做出如下处理
  this.set = function(key,value) {
      if(key !== 'sex') {
        data[key] = value
    }
  }
}

// 实例化
var person = new Person();

//  读取
console.table({
    name: person.get('name'),
  sex:person.get('sex'),
  age:person.get('age')
});

// 修改
person.set('name','es3-name'); // 可以修改

person.set('sex','female'); // 不可以修改

ES5

var Person = {
    name:'es5',
  age:15
};
// 将Person下的sex属性进行数据保护
Object.defineProperty(Person,'sex',{
    writable:false,
  value:'male'
});

console.table({
    name:Person.name,
  age:Person.age,
  sex:Person.sex
})
Person.name = 'es5-name';// 可以修改

Person.sex = 'female'; // 不能够修改

ES6（Proxy对象代理）

let Person = {
    name:'es6',
  sex:'male',
  age:15
}

let person = new Proxy(Person,{
  
    get(target,key) {
      return target[key]
  },
  // 最重要的是set内部，里面可以进行各种各样的逻辑处理
  set(target,key,value){
      if(key !== 'sex'){
        target[key] = value;
    }
  }
})

console.table({
    name:Person.name,
  age:Person.age,
  sex:Person.sex
})

Person.name = 'es6-name'; // 可以修改

Person.sex = 'female'; // 不可以修改