Eine eingehende Analyse von Proxy in ES6

Einen einfachen Proxy erstellen

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

proxy.name = 'proxy'

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

target.name = 'target'

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

In diesem Beispiel wird ein Name auf dem Ziel erstellt, wenn dem Attribut „proxy.name“ „proxy“ zugewiesen wird. Der Proxy leitet den Vorgang einfach an das Ziel weiter und speichert dieses Attribut nicht. Äquivalent zu „proxy.name“ und „target.name“ beziehen sich auf den Wert von „target.name“.

Verwenden Sie den Set-Trap, um Attribute zu überprüfen.

Der Set-Trap empfängt vier Parameter:

1.trapTarget: das Objekt, das zum Empfangen des Attributs verwendet wird (das Ziel des Agenten)

2.key: der zu schreibende Attributschlüssel (Zeichenfolge oder Symbol) )

3.Wert: Der Attributwert, der geschrieben wird

4.Empfänger: Das Objekt, in dem die Operation ausgeführt wird (normalerweise der 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" // 这里会报错因为不数字

Diese Instanz löst die Set-Funktion jedes Mal aus, wenn der Wert des Proxy wird außerhalb geändert.

Verwenden Sie get trap, um die Objektstruktur zu überprüfen.

get empfängt 3 Parameter.

1.trapTarget: das Objekt, das zum Empfangen von Attributen verwendet wird (das Ziel des Agenten).

2.key: der zu schreibende Attributschlüssel (String oder Symbol)

3.receiver: Das Objekt, in dem die Operation ausgeführt wird (normalerweise der 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) // 属性不存在会抛出错误

Die get-Methode wird ausgelöst, wenn wir auf die vom Proxy erstellten Objekteigenschaften zugreifen

Verwenden Sie has trap, damit vorhandene Eigenschaften vorhanden sind

has empfängt 2 Parameter:

1.trapTarget: Ein Objekt zum Empfangen von Eigenschaften (das Ziel des Agenten)

2.key: Der zu schreibende Eigenschaftsschlüssel (Zeichenfolge oder Symbol)

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

let proxy = new Proxy(target, {
    has(trapTarget, key) {
        if (key === 'value') {
            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

Verwenden Sie deleteProperty trap, um das Löschen von Eigenschaften zu verhindern

deleteProperty empfängt 2 Parameter:

1.trapTarget: Objekt zum Empfangen von Eigenschaften (Ziel des Proxys)

2.key: Zu schreibender Eigenschaftsschlüssel (Zeichenfolge oder Symbol)

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

deleteProperty wird ausgelöst, wenn die Proxy-Eigenschaft soll extern gelöscht werden Funktion

Prototype Proxy Trap (setProptotypeOf, getPrototypeOf)

setProptotypeOf empfängt 2 Parameter

1.trapTarget: ein Objekt zum Empfangen von Eigenschaften (das Ziel des Proxys)

2.proto: ein verwendetes Objekt als Prototyp

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, {}) // 抛出错误

if Normale Implementierung

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, {}) // 成功

Eigenschaftsdeskriptor trap

defineProperty empfängt drei Parameter:

1.trapTarget: das Objekt, das zum Empfangen der Eigenschaft verwendet wird (das Ziel des Agenten)

2.key: die Eigenschaft Zu schreibender Schlüssel (Zeichenfolge oder Symbol)

3.descriptor: Das Beschreibungsobjekt der Eigenschaft

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

Die interne Methode defineProperty | wird ausgelöst, wenn getOwnPropertyDescriptor extern aufgerufen wird.

ownKeys-Trap

ownKeys-Trap fängt die vier externen Methoden Object.keys(), Object.getOwnPropertyName(), Object.getOwnPropertySymbols() und Object.assign() ab

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

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)

Weitere programmierbezogene Kenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonEine eingehende Analyse von Proxy in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!