ES6 : Concept et utilisation du proxy

Comme son nom l'indique, Proxy consiste à mettre en place un proxy entre l'objet et sa valeur d'attribut, obtenir la valeur de l'objet ou définir la valeur de l'objet, instancier et d'autres opérations, etc., seront interceptées, après cela, nous pouvons traiter une couche de manière unifiée, nous pouvons la considérer comme "l'agent"

Présentation du problème :

//问题: 能够在obj.data修改成222之前拦截到这个操作
/*
  本质上, 我们想要在修改属性值的同时, 去修改DOM值, 即做到同步更新页面
*/
let obj = {
  data: "111"
}
obj.data = "222"

Si nous utilisons la méthode avant ES6 pour le résoudre, utilisez Object.defineProperty(object, property, {})

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

Application pratique : mettre à jour les propriétés de l'objet et mettre à jour les pages en même temps

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"

Remarque : Object.defineProperty est remplacé par Proxy après vue3

Pour résumer les inconvénients de Object.defineProperty :

1- Un seul attribut peut être intercepté à la fois

2- Il ne peut intercepter que des objets

Voici les méthodes dans Proxy :

méthode get : déclenchée lors de l'accès à une propriété

let target = {}
let proxy = new Proxy(target,{
    get(target,prop){
        return target[prop]
    }
})

méthode set : déclenchée lorsqu'une propriété est modifiée

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;
    }
})

a la méthode : détermine s'il existe un certain attribut (doit être utilisé sous proxy et passe”属性” in proxy au juge **) **

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;
    }
})

Remarque : Nous pouvons utiliser ”属性” in proxyla méthode pour déterminer si l'objet a des attributs

cette question

Le this de get et set dans le proxy pointe vers le proxy. Par conséquent, s'il s'agit d'une méthode objet, nous devons modifier son 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}

Le proxy est essentiellement un détournement de données non destructif de la métaprogrammation.Il dérive des fonctions sur la base de l'objet d'origine sans affecter l'objet d'origine, ce qui est conforme au concept de conception de couplage lâche et de haute cohésion.

Référence : 015-ES6-Proxy_哔哩哔哩_bilibili

ES6 : Concept et utilisation du proxy

Guess you like