一、Reflect 反射

1. Reflect.get(target, name, receiver)

Reflect是一个全局对象

Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。

注意：target只能为一个对象

如果name属性部署了读取函数（getter），则读取函数的this绑定receiver。

注意：bas是一个属性而不是函数，因此不能用call来绑定receiver，只能用Reflect来实现

普通函数的则可以直接用call调用

总结Reflect.get()的两种用法

// 用法一
var obj = {
  name: '阿伟',
  age: '18'
}
Reflect.get(obj, 'name') // "阿伟"
// 用法二
var obj1 = {
  a: 1,
  b: 2,
  get c() {
    return this.a + this.b
  }
}
obj1.c // 3
var obj2 = {
  a: 3,
  b: 4
}
Reflect.get(obj1, 'c', obj2) // 7

3. Reflect.set(target, name, value, receiver)

Reflect.set方法设置target对象的name属性等于value

如果name属性设置了赋值函数，则赋值函数的this绑定receiver

3. Reflect.apply(func, thisArg, args)

Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args)，用于绑定this对象后执行给定函数。

可将Reflect 的 set、get、apply 近似的理解为下面这样

target.get('name') <===> Reflect.get(target, 'name', receiver) // target 为一个对象
target.set('name', 'xxx') <===> Reflect.set(target, 'name', 'xxx', receiver)
函数.apply(this, args) <===> Reflect.apply(函数, this, args)

4. Reflect.construct(target, args)

Reflect.construct方法等同于new target(...args)，这提供了一种不使用new，来调用构造函数的方法。

function Greeting(name) {
  this.name = name;
}

// new 的写法
const instance = new Greeting('张三');

// Reflect.construct 的写法
const instance = Reflect.construct(Greeting, ['张三']);

注意：Reflect.construct()方法的第一个参数target必须是函数

二、Proxy 代理

Proxy 可以理解成，在目标对象之前架设一层“拦截”（中介），外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

ES6原生提供Proxy构造函数，用来生成Proxy实例。

var proxy = new Proxy(target, handler);

Proxy对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。

set

get

用图来理解Proxy就是下面这样

例子：使被代理对象中的lives始终大于0

但这样存在一个问题，用户还是可以直接访问这个变量并对其进行修改

因此我们需要让用户无法访问这个变量，有两种做法

可以用闭包来隐藏lives
不给这个被代理的对象名字，即让它为匿名对象（常见套路）

下面是另一个拦截读取属性行为的例子。

上面代码中，作为构造函数，Proxy接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有Proxy的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作，需要提供一个对应的处理函数，该函数将拦截对应的操作。比如，上面代码中，配置对象有一个get方法，用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到，由于拦截函数总是返回35，所以访问任何属性都得到35。

注意：要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

用代理实现“不可能实现的”自动填充对象

创建一个Tree()函数来实现以下特性：

> var tree = Tree();
> tree
    { }
> tree.branch1.branch2.twig = "green";
> tree
    { branch1: { branch2: { twig: "green" } } }
> tree.branch1.branch3.twig = "yellow";
    { branch1: { branch2: { twig: "green" },
                 branch3: { twig: "yellow" }}}

普通对象是无法做到的

但是通过代理，我们只用几行代码就可以轻松实现，然后只需要接入tree.[[Get]]()就可以了

function Tree() {
  return new Proxy({}, handler);
}
var handler = {
  get: function(target, key, receiver) {
    if (!(key in target)) {
      target[key] = Tree(); // 自动创建一个子树 
    }
    return Reflect.get(target, key, receiver);
  }
};

总结Proxy的这种做法就是“如果不存在，则先创建，再读取”。

实例：Web 服务的客户端

Proxy对象可以拦截目标对象的任意属性，这使得它很合适用来写Web服务的客户端。

const service = createWebService('http://example.com/data');

service.employees().then(json => {
  const employees = JSON.parse(json);
  // ···
});

上面代码新建了一个Web服务的接口，这个接口返回各种数据。Proxy可以拦截这个对象的任意属性，所以不用为每一种数据写一个适配方法，只要写一个Proxy拦截就可以了。

function createWebService(baseUrl) {
  return new Proxy({}, {
    get(target, propKey, receiver) {
      return () => httpGet(baseUrl + '/' + propKey);
    }
  });
}

service.employees()实际上是不存在的，当读取service.employees()时，就会执行httpGet(baseUrl + '/' + propKey)，因此service.employees()就等价于httpGet('http://example.com/data/employees')

三、Vue 3 将用 Proxy 改写

<div id="app">
   姓名：{{obj.name}}<br> 
   年龄：{{obj.age}}<br>
   <button @click=createAge>创建年龄</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    obj:{
      name: '阿伟'
    }
  },
  methods:{
    createAge(){
      this.obj.age = 18
      console.log(this.obj)
    }
  }
})

我们会发现点击按钮后，页面上并没有显示'18'，但控制台中却打印出了age

为什么age创建之后却无法更新到页面的DOM上呢？

这是因为Vue是通过object.defineProperty来实现数据响应式的

受现代JavaScript的限制 (而且Object.observe也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的

上面代码中name已经存在，因此app.name是响应式的，而age不存在，因此app.age是非响应式的。

解决：

在data加入age即可

使用 Proxy 代理

然后刷新DOM

var proxy = new Proxy(data.obj, {// 注意Proxy只会代理当前对象，并不会代理子对象，因此这里是data.obj
  set(target, name, value){
    // refreshDom()
    return Reflect.set(target, name, value)
  }
})

参考：

ES6 Reflect 与 Proxy