用过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上场
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
要是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);
},
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
