ES6: Proxy概念及用法

news2024/9/25 13:14:55

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}