# Proxy和Reflect
const target = {
name: 'zs',
count: 0
};
let proxy = new Proxy(target, {
get(target, property) {
console.log(`get ${property}`);
return Reflect.get(target, property);
},
set(target, property, value) {
console.log('正在修改', property);
// // 表示成功
Reflect.set(target, property, value);
return true
}
});
console.log(proxy.name);
proxy.name = 'ls';
console.log(proxy.name);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
使用Proxy包装后
const product = { price: 10, quantity: 2 };
function reactive(target) {
const handler = {
get(target, key, receiver) {
console.log("正在读取的数据", key);
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
console.log("正在修改的数据:", key, ",值为:", value);
return Reflect.set(target, key, value, receiver);
}
};
return new Proxy(target, handler);
}
let proxiedProduct = reactive(product); // 将对象转换为响应式对象
proxiedProduct.price = 20;
console.log(proxiedProduct["price"]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Reflect.getPrototypeOf用于获取一个对象的原型(prototype)