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) // targetIn 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“.
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.
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
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) // truedeleteProperty 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) // falsedeleteProperty wird ausgelöst, wenn die Proxy-Eigenschaft soll extern gelöscht werden Funktion
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, {}) // 成功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 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!
