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
