一、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)
}
})
参考：
网友评论