数据劫持的好帮手 -Proxy

前言

小伙伴们大家好。在ES5中有个Object.defineProperty()函数可以用于对对象的属性进行劫持，或者给对象新增一个属性等操作。看过Vue2.0源码的小伙伴应该都知道，其中数据响应式原理就用到了Object.defineProperty这个方法对属性进行了劫持处理。但是我们今天的重点不是Object.defineProperty，而是ES6中为我们新提供的一个类 - Proxy。之所以先提到Object.defineProperty函数，是因为我们接下来要分享的Proxy提供的有些功能跟Object.defineProperty类似，甚至更加强大！

Proxy是个啥

• Proxy这个词翻译过来是代理的意思。而在我们这里用它来表示“代理”某些操作，比如前言中提到的“数据劫持”。可以理解为“代理器”。利用Proxy可以在目标对象之前架设一层“拦截”，当外界对该对象访问时，都必须要先通过这层拦截。这个时候我们就可以利用这个拦截对外界的访问进行一些必要的验证和限制了。
• Proxy是ES6中的一个构造函数，我们使用时需要通过new关键字来创建Proxy的实例
• Proxy构造函数接收两个参数：target和handler，target表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截的行为，比如重写get或set函数。
• 如果第二个参数handler不传或者传一个空对象，则相当于没有进行拦截，访问Proxy实例就相当于访问的是原目标对象target
• Proxy的实例可以用来作为其他对象的原型
• 同一个拦截器（即第二个参数handler）可以同时设置多个拦截操作
• 需要注意的是：要使得Proxy起作用，必须要针对Proxy的实例进行对象的相关操作，而不能针对原目标对象target进行操作，否则拦截是无效的

let obj = {
   name: "Yannis"}
let proxy