跟着前端界的绝后繁华，种种框架横空出世，包含各种mvvm框架百花怒放，比方Anglar、Vue、React等等，它们最大的长处就是可以完成数据绑定，再也不须要手动举行DOM操纵了，它们完成的道理也基本上是脏搜检或数据挟制。我们先以Vue框架动身，探究个中数据挟制的奥妙。

Vue 2.0的版本所运用的数据挟制，说白了就是经由过程Object.defineProperty()来挟制对象属性的setter和getter操纵，在数据更改时做你想要做的事变，举个栗子：

var data = {
    name:'xiaoming'
}

Object.keys(data).forEach(function(key){
    Object.defineProperty(data,key,{
        get:function(){
            console.log('get');
        },
        set:function(){
            console.log('监听到数据发生了变化');
        }
    })
});
data.name //控制台会打印出 “get”
data.name = 'xiaohong' //控制台会打印出 "监听到数据发生了变化"

但是有没有比Object.defineProperty更好的完成体式格局呢？

答案是肯定的有，那就是我们本日的主人公：Proxy

1、Proxy简介

Proxy这个词的原意是代办，用在这里示意由它来代办某些操纵，可以译为代办器。

也可以明白成在目的对象之前设置一层阻拦，外界对该对象的接见，都必需先经由过程这层阻拦，因而供应了一种机制，可以对外界的接见举行过滤和改写。

在生活中，代办形式的场景是异常罕见的，比方我们如今如果有购置外洋产物（给女朋友买一个LV的包包，前提是你要先有个女朋友，^_^）的需求，更多的是去找代购中介机构，而不是直接去外洋买。此时，代购起到的作用就是代办的作用。

Proxy组织函数可以让我们轻松的运用代办形式：

var proxy = new Proxy(target, handler);

Proxy组织函数中有两个参数：

target是用Proxy包装的被代办对象（可所以任何范例的对象，包含原生数组，函数，以至另一个代办）。

handler是一个对象，其声清晰明了代办target 的一些操纵，其属性是当实行一个操纵时定义代办的行动的函数。

讲的浅显点，怎样让代购帮你买LV的包包呢？

起首，你须要通知代购你看好了哪款包包，这个样式就是Proxy里的第一个参数target。

其次就是制订购置战略，比方外洋比国内廉价20%，就买2个，廉价40%，就买4个，这个战略就是第二个参数handle。

2、Proxy中的处置惩罚要领

Proxy有13种数据挟制的操纵，那是相称的壮大：

2.1 get要领

get要领是在你获得某对象属性值时预处置惩罚的要领，接收两个经常使用参数

• target：获得的目的值
• key：目的的key值，相称于对象的属性

可以代购来模仿handle中的get要领，以下

var Bao = {
      name: "LV",
    price:9999,
};
var proxyBao = new Proxy(Bao, {
    get: function(target, key) {
        if (target['price']>5000) {
          return '超越客户心思价位，不买了';
        } else {
          return '相符客户心思预期，买买买';
        }
    }
});
proxyBao.price
//"超越客户心思价位，不买了"

解释一下：客户想买一个LV的包，心思价位是5000，把购置目的和需求都通知了代购，代购询问了下外洋的价钱，这款LV的包是9999，超越了客户的心思价位，因而不买了。

2.2 set要领

set要领用来阻拦某个属性的赋值操纵，可以接收四个参数

• target:目的值。
• key：目的的Key值。
• value：要转变的值。
• receiver：转变前的原始值。

假定Person对象有一个age属性，该属性应当是一个不大于 200 的整数，那末可以运用Proxy保证age的属性值相符请求。

let validator = {
  set: function(target, key, value) {
    if (key === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // 关于满足前提的 age 属性以及其他属性，直接保留
    target[key] = value;
  }
};

let person = new Proxy({}, validator);

person.age = 100;

person.age // 100
person.age = 'young' // 报错 The age is not an integer
person.age = 300     // 报错 The age seems invalid

上面代码中，因为设置了存值函数set，任何不相符请求的age属性赋值，都邑抛出一个毛病，这是数据考证的一种完成要领。

3、Proxy比拟Object.defineProperty的上风

3.1 支撑数组

let arr = [1,2,3]
let proxy = new Proxy(arr, {
    get (target, key, receiver) {
        console.log('get', key)
        return Reflect.get(target, key, receiver)
    },
    set (target, key, value, receiver) {
        console.log('set', key, value)
        return Reflect.set(target, key, value, receiver)
    }
})
proxy.push(4)
// 可以打印出许多内容
// get push     (寻觅 proxy.push 要领)
// get length   (猎取当前的 length)
// set 3 4      (设置 proxy[3] = 4)
// set length 4 (设置 proxy.length = 4)

Proxy 不须要对数组的要领举行重载，省去了浩瀚 hack，削减代码量即是削减了保护本钱，而且规范的就是最好的。

3.2 针对对象

在数据挟制这个问题上，Proxy 可以被认为是 Object.defineProperty() 的升级版。外界对某个对象的接见，都必需经由这层阻拦。因而它是针对 全部对象，而不是 对象的某个属性，所以也就不须要对 keys 举行遍历。

let obj = {
  name: 'Eason',
  age: 30
}
let handler = {
  get (target, key, receiver) {
    console.log('get', key)
    return Reflect.get(target, key, receiver)
  },
  set (target, key, value, receiver) {
    console.log('set', key, value)
    return Reflect.set(target, key, value, receiver)
  }
}
let proxy = new Proxy(obj, handler)
proxy.name = 'Zoe' // set name Zoe
proxy.age = 18 // set age 18

3.3 嵌套支撑

本质上，Proxy 也是不支撑嵌套的，这点和 Object.defineProperty() 是一样的。因而也须要经由过程逐层遍向来处理。Proxy 的写法是在 get 内里递归挪用 Proxy 并返回，代码以下：

let obj = {
  info: {
    name: 'eason',
    blogs: ['webpack', 'babel', 'cache']
  }
}
let handler = {
  get (target, key, receiver) {
    console.log('get', key)
    // 递归建立并返回
    if (typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], handler)
    }
    return Reflect.get(target, key, receiver)
  },
  set (target, key, value, receiver) {
    console.log('set', key, value)
    return Reflect.set(target, key, value, receiver)
  }
}
let proxy = new Proxy(obj, handler)
// 以下两句都可以进入 set
proxy.info.name = 'Zoe'
proxy.info.blogs.push('proxy')

4、运用实例

4.1 运用Proxy完成表单校验

let person = {
    name: 'xiaoming',
    age: 30
}
let handler = {
    set (target, key, value, receiver) {
      if (key === 'name' && typeof value !== 'string') {
        throw new Error('用户姓名必需是字符串范例')
      }
      if (key === 'age' && typeof value !== 'number') {
        throw new Error('用户岁数必需是数字范例')
      }
      return Reflect.set(target, key, value, receiver)
    }
}
let boy = new Proxy(person, handler)
boy.name = 'xiaohong' // OK
boy.age = '18' // 报错  用户岁数必需是数字范例

5、总结

Proxy本质上属于元编程非破坏性数据挟制，在原对象的基础上举行了功用的衍生而又不影响原对象，相符松耦合高内聚的设想理念。

浅显的说Proxy在数据外层套了个壳，然后经由过程这层壳接见内部的数据，就像下面的图：

Proxy让JS开辟者很轻易的运用代办形式，使函数越发壮大，营业逻辑越发清晰。

Proxy 不只可以庖代 Object.defineProperty 而且还扩增了异常多的功用。Proxy 技术支撑监测数组的 push 等要领操纵，支撑对象属性的动态增加和删除，极大的简化了相应化的代码量。Vue 3.0的也会运用Proxy去完成部份中心代码。

在营业开辟时应当注重Proxy运用场景，当对象的功用变得复杂或许我们须要举行肯定的接见限定时，便可以斟酌运用代办。