反射和代理
一、反射
1、反射是什么
Reflect是一个内置的JS对象，它提供了一系列方法，可以让开发者通过调用这些方法，访问一些JS底层功能
由于它类似于其他语言的反射，因此取名为Reflect
2、可以做什么
使用Reflect可以实现诸如 属性的赋值与取值、调用普通函数、调用构造函数、判断属性是否存在与对象中等等功能
3、API
| 方法 | 简介 |
|---|---|
| Reflect.set(target,protertyKey,value) | 给对象赋值 |
| Reflect.get(target,protertyKey) | 获取对象的值 |
| Reflect.apply(target,this,arguments) | 调用函数 |
| Reflect.defineProperty(target,protertyKey) | 属性描述 |
| Reflect.deleteProperty(target,protertyKey) | 删除对象的属性 |
| Reflect.construct(target,arguments) | 使用构造函数的方式创建对象 |
| Reflect.has(target,protertyKey) | 判断一个对象是否拥有一个属性 |
// 1.Reflect.set(target,protertyKey,value);设置对象target的属性propertyKey的值为value，等同于给对象的属性赋值
const obj1 = {
a: 1,
b: 2
}
//以前的赋值，但是有了=号
obj.c = 3;
//反射中的赋值
Reflect.set(obj, "c", 10)
console.log(obj)
// 2.Reflect.get(target,protertyKey);读取对象target的属性propertyKey，等同于读取对象的属性值
console.log(Reflect.get(obj, "a"));
// 3.Reflect.apply(target,this,arguments)调用一个指定的函数，并绑定this和参数列表。等同于函数调用
function fun(a, b) {
return a + b;
}
// fun(3,4)
Reflect.apply(fun, null, [3, 4])
// 4.Reflect.defineProperty(target,protertyKey)定义属性类似于Object.defineProperty，不同的是如果配置出现问题，返回false而不是报错
Reflect.defineProperty(obj, 'a', {
value: 10,
configurable: false,
enumerable: false,
writable: false
})
// 5.Reflect.deleteProperty(target,protertyKey)删除属性
//delete obj.a;
Reflect.deleteProperty(obj, "a")
console.log(obj)
// 6.Reflect.construct(target,arguments) //使用构造函数的方式创建对象
// new 不让用创建
function Test(a, b) {
this.a = a;
this.b = b;
// const t = new Test(5,6)
const t = Reflect.construct(Test, [5, 6])
console.log(t)
// 7.Reflect.has(target,protertyKey) 判断一个对象是否拥有某个属性
console.log('a' in obj)
console.log(Reflect.has(obj, "a"));
二、代理
1、概念
代理就是一个对象的所有方法和属性的调用都需要借助另一个对象
2、作用
提供了修改底层实现的方式
3、创建
const p = new Proxy(target,handler)
//target 目标对象
//handler 是一个普通对象，可以重写底层方法
//返回一个代理对象
//p为代理对象
const obj = {
a: 1,
b: 2
}
const proxy = new Proxy(obj, { //这个就是代理对象
}
console.log(proxy);
proxy.abc = 10;
console.log(proxy);
console.log(obj);//obj中也有了abc这个属性
const proxy = new Proxy(obj, { //这个就是代理对象
set(target, protertyKey, value) {
console.log(`设置了${protertyKey}属性，值为${value}`);
Reflect.set(target, protertyKey, value);
},
get(target, protertyKey) {
console.log(`访问了${protertyKey}属性`);
return Reflect.get(target, protertyKey)
},
has(target, protertyKey) {
return Reflect.has(target,protertyKey)
return false;
},
// nan(target, protertyKey) { //不管这的名字是什么，都会走进函数中
// Reflect.deleteProperty(target, protertyKey)
// },
delete(target, protertyKey) {
Reflect.deleteProperty(target, protertyKey)
}
})
console.log(proxy);
proxy.a = 10;
console.log('a' in proxy);
观察者模式
- ES5写观察者模式：
<div id="container">
</div>
// 观察者模式
// 有一个对象，是一个观察者，观察属性值的变化，当属性值发生变化的时候，去做一些事情
function observer(target) {
const div = document.getElementById("container");
const ob = {}; //创建一个新的对象，这个新的对象就是代理对象，最后会在函数执行完以后被返回
const props = Object.keys(target);
for (const prop of props) {
// ob[prop] = target[prop];
Object.defineProperty(ob, prop, {
get() {
return target[prop];
},
set(val) {
target[prop] = val;
render()
},
enumerable: true //通过存储器的属性全都会变成false
})
}
render()
function render() { //渲染函数
let html = "";
for (const prop of Object.keys(ob)) {
html += `
<p>
<span>${prop}:</span>
<span>${ob[prop]}</span>
</p>
`
}
div.innerHTML = html;
}
return ob;
}
const target = {
a: 1,
b: 2
}
const obj = observer(target);
target.a = 1000; //目标函数不改变，让代理函数obj干
obj.a = 5000;
obj.c = 8; //没有配置obj.c
- ES6写观察者模式：
function observer(target) {
const div = document.getElementById("container");
const proxy = new Proxy(target, {
set(target, prop, value) {
Reflect.set(target, prop, value)
render()
},
get(target, prop) {
return Reflect.get(target, prop)
}
})
render()
function render() {
let html = "";
for (const prop of Object.keys(target)) {
html += `
<p>
<span>${prop}:</span>
<span>${target[prop]}</span>
</p>
`
}
div.innerHTML = html;
}
return proxy;
}
const target = {
a: 1,
b: 2
}
const obj = observer(target);
target.a = 1000; //目标函数不改变，让代理函数obj干
obj.a = 5000;
obj.c = 8; //代理配置可以改变属性
