Proxy如其名， 它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值， 以及实例化等等多种操作， 都会被拦截住， 经过这一层我们可以统一处理，我们可以认为它就是“代理器”
引入问题:
//问题: 能够在obj.data修改成222之前拦截到这个操作
/*本质上, 我们想要在修改属性值的同时, 去修改DOM值, 即做到同步更新页面
*/
let obj = {data: "111"
}
obj.data = "222"
如果我们采用ES6之前的方式解决, 采用Object.defineProperty(对象, 属性, {})
let obj = {}
Object.defineProperty(obj, "data", {get() {console.log("get"); // 属性被访问时调用},set() {console.log("set"); // 属性被修改时调用}
})
console.log(obj.data); // get undefined <-此时调用get
obj.data = "test" // set <-此时调用set
实际应用: 更新对象属性, 同时更新页面
let obj = {}
Object.defineProperty(obj, "data", {get() {console.log("get");return box.innerHTML},set(value) {console.log("set");box.innerHTML = value}
})
console.log(obj.data);
obj.data = "test"
注意: vue3之后把Object.defineProperty替换成了Proxy
总结一下 Object.defineProperty 的缺点:
1-每次只能拦截一个属性
2-它只能拦截对象
以下是Proxy中的方法:
get方法: 访问属性时触发
let target = {}
let proxy = new Proxy(target,{get(target,prop){return target[prop]}
})
set方法: 修改属性时触发
let target = {}
let proxy = new Proxy(target,{get(target,prop){return target[prop]},set(target,prop,value){if(prop==="data"){box.innerHTML = value}target[prop] = value;}
})
has方法: 判断有没有某个属性(需要在proxy下使用, 并通过”属性” in proxy来判断**)**
let target = {_prop: "内部数据"
}
let proxy = new Proxy(target, {get(target, prop) {return target[prop]},set(target, prop, value) {if (prop === "data") {box.innerHTML = value}target[prop] = value;},has(target, key) {if (key[0] === '_') {return false;}return key in target;}
})
注意: 我们可以通过 ”属性” in proxy 的方式来判断对象是否有属性
this问题
在proxy中的get与set的this指向的就是proxy. 因此, 如果是对象的方法, 我们需要对它的this进行修正
let s = new Set()let proxy = new Proxy(s, {get(target, key) {// 如果是方法, 需要修正this指向let value = target[key]if(value instanceof Function) {return value.bind(target)}return value},set() {console.log("set");}
})
//proxy.add(1) // Uncaught TypeError: Method Set.prototype.add called on incompatible receiver #<Set>
//修改后:
console.log(proxy.add(1)); // Set(1) {1}
Proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。
参考: 015-ES6-Proxy_哔哩哔哩_bilibili
