Une analyse approfondie de Proxy dans ES6-js tutoriel-php.cn

Une analyse approfondie de Proxy dans ES6

青灯夜游

Libérer： 2021-07-05 11:23:25

avant

1619 Les gens l'ont consulté

Une analyse approfondie de Proxy dans ES6

Créer un proxy simple

let target = {}
let proxy = new Proxy(target, {})

proxy.name = &#39;proxy&#39;

console.log(proxy.name) // proxy
console.log(target.name) // proxy

target.name = &#39;target&#39;

console.log(proxy.name) // target
console.log(target.name) // target

Copier après la connexion

Cet exemple créera un nom sur la cible lors de l'attribution de "proxy" à l'attribut proxy.name Le proxy transmet simplement l'opération à la cible, et il ne stockera pas cet attribut. L'équivalent de proxy.name et target.name fait référence à la valeur de target.name.

Utilisez le set trap pour vérifier les attributs

Le set trap reçoit quatre paramètres :

1.trapTarget : l'objet utilisé pour recevoir l'attribut (la cible de l'agent)

2.key : la clé d'attribut à écrire (chaîne ou symbole) )

3.value : La valeur de l'attribut en cours d'écriture

4.receiver : L'objet sur lequel l'opération se produit (généralement le proxy)

let target = {
    name: "target"
}

let proxy = new Proxy(target, {
    set(trapTarget, key, value, receiver) {
        if (!trapTarget.hasOwnProperty(key)) {
            if (isNaN(value)) {
                throw new TypeError("属性必须时数字")
            }
        }

        return Reflect.set(trapTarget, key, value, receiver)
    }
})

proxy.count = 1
console.log(proxy.count) //1
console.log(target.count) //1

proxy.name = "proxy"

console.log(proxy.name) //proxy
console.log(target.name) //proxy

proxy.other = "other" // 这里会报错因为不数字

Copier après la connexion

Cette instance déclenchera la fonction set à chaque fois que la valeur du le proxy est changé à l'extérieur.

Utilisez get trap pour vérifier la structure de l'objet

get reçoit 3 paramètres

1.trapTarget : l'objet utilisé pour recevoir les attributs (la cible de l'agent)

2.key : la clé d'attribut à écrire (string ou symbole)

3.receiver : L'objet où l'opération se produit (généralement le proxy)

let proxy = new Proxy({}, {
    get(trapTarget, key, receiver) {
        if (!(key in receiver)) {
            throw new TypeError("属性" + key + "不存在")
        }

        return Reflect.get(trapTarget, key, receiver)
    }
})

proxy.name = "proxy"

console.log(proxy.name) //proxy

console.log(proxy.age) // 属性不存在会抛出错误

Copier après la connexion

La méthode get est déclenchée lorsque l'on accède aux propriétés de l'objet créé par le proxy

Utiliser has trap donc il y a déjà des propriétés

has reçoit 2 paramètres :

1.trapTarget : Un objet utilisé pour recevoir les propriétés (la cible de l'agent)

2.key : La clé de propriété (chaîne ou symbole) à écrire

let target = {
    name: "target",
    value: 42
}

let proxy = new Proxy(target, {
    has(trapTarget, key) {
        if (key === &#39;value&#39;) {
            return false
        } else {
            return Reflect.has(trapTarget, key)
        }
    }
})


console.log("value" in proxy) // false
console.log("name" in proxy) // true
console.log("toString" in proxy) // true

Copier après la connexion

Utiliser le trap deleteProperty pour empêcher la suppression des propriétés

deleteProperty reçoit 2 paramètres :

1.trapTarget : Objet utilisé pour recevoir les propriétés (cible du proxy)

2.key : Clé de propriété à écrire (chaîne ou symbole)

let target = {
    name: "target",
    value: 42
}

let proxy = new Proxy(traget, {
    deleteProperty(trapTarget, key) {
        if (key === "value") {
            return false
        } else {
            return Reflect.deleteProperty(trapTarget, key)
        }
    }
})


console.log("value" in proxy) // true

let result1 = delete proxy.value

console.log(result1) // false
console.log("value" in proxy) // true

console.log("name" in proxy) // true

let result2 = delete proxy.name
console.log(result2) // true
console.log("name" in proxy) // false

Copier après la connexion

deleteProperty sera déclenchée lorsque la propriété du proxy est à supprimer en externe Fonction

Prototype proxy trap (setProptotypeOf, getPrototypeOf)

setProptotypeOf reçoit 2 paramètres

1.trapTarget : un objet utilisé pour recevoir des propriétés (la cible du proxy)

2.proto : un objet utilisé en tant que prototype

let target = {}

let proxy = new Proxy(target, {

    // 访问时调用
    getPrototypeOf(trapTarget) {
        return null
    },
    // 改变时调用
    setPrototypeOf(trapTarget, proto) {
        return false
    }

})

let targetProto = Object.getPrototypeOf(target)
let proxyProto = Object.getPrototypeOf(proxy)

console.log(targetProto === Object.prototype) //true
console.log(proxyProto === Object.prototype) // false
console.log(proxyProto) // null

Object.setPrototypeOf(target, {}) // 成功

Object.setPrototypeOf(proxy, {}) // 抛出错误

Copier après la connexion

if Implémentation normale

let target = {}

let proxy = new Proxy(target, {

    // 访问时调用
    getPrototypeOf(trapTarget) {
        return Reflect.getPrototypeOf(trapTarget)
    },
    // 改变时调用
    setPrototypeOf(trapTarget, proto) {
        return Reflect.setPrototypeOf(trapTarget, proto)
    }

})

let targetProto = Object.getPrototypeOf(target)
let proxyProto = Object.getPrototypeOf(proxy)

console.log(targetProto === Object.prototype) //true
console.log(proxyProto === Object.prototype) // true

Object.setPrototypeOf(target, {}) // 成功

Object.setPrototypeOf(proxy, {}) // 成功

Copier après la connexion

Descripteur de propriété trap

defineProperty reçoit trois paramètres :

1.trapTarget : l'objet utilisé pour recevoir la propriété (la cible de l'agent)

2.key : la propriété clé à écrire (chaîne ou symbole)

3.descriptor : L'objet de description de la propriété

let proxy = new Proxy({}, {
    defineProperty(trapTarget, key, descriptor) { // descriptor 只能接收enumerable, configurable, value, writeable, get, set 
        if (typeof key === "symbol") {
            return false
        }
        return Reflect.defineProperty(trapTarget, key, descriptor)
    },
    getOwnPropertyDescriptor(trapTarget, key) {
        return Reflect.getOwnPropertyDescriptor(trapTarget, key)
    }
})

Object.defineProperty(proxy, "name", {
    value: "proxy"
})

console.log(proxy.name) //proxy

let nameSymbol = Symbol("name")

Object.defineProperty(proxy, nameSymbol, {
    value: "proxy"
})

Copier après la connexion

La méthode interne definitionProperty | getOwnPropertyDescriptor sera déclenchée lorsque definitionProperty | getOwnPropertyDescriptor est appelée en externe.

ownKeys trap

ownKeys trap interceptera les quatre méthodes externes Object.keys(), Object.getOwnPropertyName(), Object.getOwnPropertySymbols() et Object.assign()

let proxy = new Proxy({}, {
    ownKeys(trapTarget) {
        return Reflect.ownKeys(trapTarget).filter(key => {
            return typeof key !== "string" || key[0] !== &#39;_&#39;
        })
    }
})

let nameSymbol = Symbol("name")

proxy.name = "proxy"

proxy._name = "private"

proxy[nameSymbol] = "symbol"

let names = Object.getOwnPropertyNames(proxy),
    keys = Object.keys(proxy),
    symbols = Object.getOwnPropertySymbols(proxy)

console.log(names.length) // 1
console.log(names) // name

console.log(keys.length) //1
console.log(keys[0]) // name

console.log(symbols.length) //1
console.log(symbols[0]) // symbol(name)

Copier après la connexion

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!