用過vue的知道，vue的響應實現用的Proxy，且裡面是配合Reflect用的,查看Proxy和Reflect文檔最顯眼的是Reflect物件的靜態方法和Proxy代理方法的命名相同，Reflect可以操作物件使用， proxy可以代理對象，但沒有找到為啥有時一定要在Proxy代理方法中使用Reflect
Reflect對象的靜態方法和Proxy代理方法的命名相同，都有13種，範例get，set如下
const tempObj = { a: 1 };
Reflect.get(tempObj, 'a'); // 返回 1
Reflect.set(tempObj, 'a', 2); // 返回true 表示设置成功， a的值变2
const tempObj1 = { a: 1 };
const handler = {
get: function (obj, prop, receiver) {
return prop === 'a' ? 1000 : obj[prop];
},
set: function (obj, prop, value, receiver) {
console.log(prop);
obj[prop] = prop === 'a' ? 6 : value;
return true;
},
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.a; // proxyObj => {a: 1000}
proxyObj.a = 2; // proxyObj => {a: 6}如果Proxy不做其它操作直接正常回傳
const tempObj1 = { a: 1 };
const handler = {
get: function (obj, prop, receiver) {
return obj[prop];
},
set: function (obj, prop, value, receiver) {
obj[prop] = value
return true;
},
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.a; // proxyObj => {a: 1}
proxyObj.a = 2; // proxyObj => {a: 2}以上面情況完Proxy可以不使用Reflect處理攔截，比使用Reflect簡單多了
不一樣的對象， 帶有get的對象
const tempObj1 = {
a: 1,
get value() {
console.log(this === proxyObj); // false
return this.a;
},
};
const handler = {
get: function (obj, prop, receiver) {
return obj[prop];
},
set: function (obj, prop, value, receiver) {
obj[prop] = value;
return true;
},
};
const proxyObj = new Proxy(tempObj1, handler);
proxyObj.value; // 1上面value中的打印的值為false，期望的結果應該true， 但應該代理中用的原對象取值所以this指向了原對象，所以值為false
雖然this指錯了，但得到值還是正確定，這不是一定的理由
const parent = {
a: 1,
get value() {
console.log(this === child); // false
return this.a;
},
};
const handler = {
get: function (obj, prop, receiver) {
return obj[prop];
},
set: function (obj, prop, value, receiver) {
obj[prop] = value;
return true;
},
};
const proxyObj = new Proxy(parent, handler);
const child = Object.setPrototypeOf({ a: 2 }, proxyObj);
child.value; // 1這就有問題了，輸出的結果都和期望的不一樣了，this應該指向child,但指向了parent
Reflect上場
要是Reflect.get(obj, prop)換成obj[prop]，這等於沒換，意義和結果是一樣的，這不是還有一個receiver參數沒有用嘛
const parent = {
a: 1,
get value() {
console.log(this === child); // true
return this.a;
},
};
const handler = {
get: function (obj, prop, receiver) {
Reflect.get(obj, prop)
- return obj[prop];
+ retrun Reflect.get(obj, prop, receiver)
},
set: function (obj, prop, value, receiver) {
- obj[prop] = value;
+ Reflect.get(obj, prop, value, receiver)
return true;
},
};
const proxyObj = new Proxy(parent, handler);
const child = Object.setPrototypeOf({ a: 2 }, proxyObj);
child.value; // 2
this指向正確，結果也當然和期望一致，receiver的不是指代理對象，也不是指原對象，而是執行上下文（有句話是這麼說的，不用特定方式改變this的情況下，誰調用指向誰，這就是期望的），這裡child調用的value所以期望的指向應該是child, 這裡你可能想到直接用receiver[prop]不行了，這樣會出現執行溢出，receiver[prop]相當於child.value，child.value還沒執行完，receiver[prop]又執行了，就會無限在執行
Reflect.get(target, key, receiver)中的receiver參數修改了this指向，不加this指向target, 加了後指向receiver
#代理物件中有用到
this時一定要用到Reflect，這樣才能得到一直符合期望的值
vue3中的代理物件到得的都是符合期望的值，在攔截中做了收集和更新，所以一定要在Proxy的攔截函數中使用Reflect處理
get: function (...arg) {
return Reflect.get(...arg);
},以上是vue3中的Proxy為什麼一定要用Reflect的詳細內容。更多資訊請關注PHP中文網其他相關文章！
