Proxy里为什么要配合Reflect使用

HTML:

<body>
<div>
普通对象操作：
<span id="common"></span>
</div>

<div>
Reflect函数操作：
<span id="reflect"></span>
</div>
</body>

let user = {
_name: "Guest",
get name() {
  return this._name;
}
};

let userProxy = new Proxy(user, {
get(target, prop, receiver) {
  return target[prop];
}
});

let admin = {
__proto__: userProxy,
_name: "Admin"
};
document.getElementById('common').innerHTML = admin.name

let user2 = {
_name: "Guest",
get name() {
  return this._name;
}
};

let userProxy2 = new Proxy(user2, {
get(target, prop, receiver) {
  return Reflect.get(target, prop, receiver);
}
});

let admin2 = {
__proto__: userProxy2,
_name: "Admin"
}

document.getElementById('reflect').innerHTML = admin2.name

Result:

直接使用普通对象： target[prop]这里target实际上还是user。this 指向的是user，而不是admin。故html显示Guest

使用Reflect.get(target, prop, receiver)，第三个参数虽然没有用到，但是它代表的是 Proxy 实例或者继承 proxy 的那个对象。即：代理对象本身，同时也有可能是继承了代理对象的对象，具体区别于调用方

如果使用Reflect.get(target, prop)相当于 target[prop]。

**1. Proxy 中接受的 receiver 形参，表示代理对象本身或者继承了代理对象的对象。

Reflect 中传入的 recriver 实参，表示修改执行原始操作时的 this 指向。**

laclys / Front-End_practice

Proxy里为什么要配合Reflect使用 #160