在ES6中新增了Proxy这个类及Reflect这个对象
Proxy用来代理对象监视对象的作用
Reflect上有操作对象的一些方法 这些方法对应了Proxy上捕获器的方法
Proxy: 监视代理对象
const obj = {
name: '小明',
age: 18
}
在js中如果要监听一个对象的一些响应式就可以用到Proxy Vue3响应式原理就是使用的Proxy
Proxy 是一个类 创建时需要传入俩个参数 :
1为需要监听的对象 2为捕获器方法对象 有13个捕获器方法 在此列举四个捕获器方法,其他捕获器方法关于原型的,感兴趣的可以查下其他资料 常用的就为下面四个
// 创建一个对象
const obj = {
name: '小明',
age: 18
};
// new一个Proxy 用来监视obj对象
const proxy = new Proxy(obj, {
// 这些捕获器方法会在对所监视的对象进行相对操作时 被回调
// 一:获取对象属性时的捕获器方法:
// 参数说明:1为所监视的对象,2为操作时对象的key,3为new出的代理对象
get(e,k,r) {
console.log(e,`对象被获取了${k}的值为:${e[k]}`);
// return e[k];
// 利用Reflect
Reflect.get(e,k,r);
},
// 二:设置或修改对象属性时的捕获器方法:
// 参数说明:1为所监视的对象,2为操作时对象的key,3为设置或修改时的值,4为new出的代理对象
set(e,k,n,r) {
console.log(e,`对象被设置了${k}的值为:${n}`);
// e[k] = n;
// 利用Reflect
Reflect.set(e,k,n,r);
},
// 三:查询对象属性时的捕获器方法
// 参数说明:1为所监视的对象,2为操作时对象的key
has(e,k) {
console.log(e,`对象被查看是否当前有${k}这个属性`);
// 返回布尔类型 true/false
},
// 四:删除对象属性时的捕获器方法
// 参数说明:1为所监视的对象,2为操作时对象的key
deleteProperty(e,k) {
console.log(e,`对象被删除了${k}这个属性`);
// delete e[k];
// 利用Reflect
Reflect.deleteProperty(e,k);
},
});
// 操作:
console.log(proxy.name); // 此时会回调触发proxy里get捕获器方法
proxy.age = 22; // 此时会回调触发proxy里set捕获器方法
console.log('girlFriend' in proxy); // 返回布尔类型 true/false 可做条件编译来使用
if('girlFriend' in proxy); // 此时会回调触发proxy里has捕获器方法
delete proxy.age; // 此时会回调触发proxy里delterProperty捕获器方法
对于捕获器get和set方法最后一个参数:new出来的代理对象的解释:
Reflect有一个construct方法,当使用构造函数时 new出来的对象类型想要指向另一个构造函数时就可以用到construct这个方法
function Man(name,age) {
this.name = name;
this.age = age;
}
function Woman() {
}
const c = new Man('c',30)
console.log(c)
// 此时c的类型为Man 想要指向Woman 就可以用到Reflect上的construct方法
// construct方法会返回一个新的对象
// 参数说明:1参为new时的构造函数名,2参为new时需要传入的属性值,3为需要类型指向的构造函数名
const ck = Reflect.construct(Man,['c',30],Woman)
console.log(ck)
// 此时ck的类型就为Woman类型
console.log(ck.__proto__ === Woman.prototype)
// 验证下: 此时ck的隐式原型和Woman的原型属性是绝等的 也就是说隐式原型指向的是Woman的原型属性
在ES6类中 ES6类的代码转ES5构造函数的源码 实现继承时就使用了Reflect上的construct方法来实现