這篇文章主要介紹了ES6中的Proxy有什么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站是一家專(zhuān)業(yè)提供西湖企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為西湖眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。
重慶分公司
重慶分公司
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這個(gè)實(shí)例將"proxy"賦值給proxy.name屬性時(shí)會(huì)在目標(biāo)上創(chuàng)建name,代理只是簡(jiǎn)單的將操作轉(zhuǎn)發(fā)給目標(biāo)，他不會(huì)儲(chǔ)存這個(gè)屬性。相當(dāng)于proxy.name和target.name引用的都是target.name的值。
set陷阱接收四個(gè)參數(shù)：
1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象
2.key：要寫(xiě)入的屬性鍵（字符串或者symbol）
3.value：被寫(xiě)入的屬性值
4.receiver：操作發(fā)生的對(duì)象（通常是代理）
let target = {
name: "target"
}
let proxy = new Proxy(target, {
set(trapTarget, key, value, receiver) {
if (!trapTarget.hasOwnProperty(key)) {
if (isNaN(value)) {
throw new TypeError("屬性必須時(shí)數(shù)字")
}
}
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" // 這里會(huì)報(bào)錯(cuò)因?yàn)椴粩?shù)字這個(gè)實(shí)例每次在外面改變proxy的值時(shí)就會(huì)出發(fā)set函數(shù)。
get接收3個(gè)參數(shù)
1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象
2.key：要寫(xiě)入的屬性鍵（字符串或者symbol）
3.receiver：操作發(fā)生的對(duì)象（通常是代理）
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) // 屬性不存在會(huì)拋出錯(cuò)誤當(dāng)我們?cè)L問(wèn)proxy創(chuàng)建的對(duì)象屬性時(shí)就會(huì)觸發(fā)get方法
has接收2個(gè)參數(shù)：
1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象
2.key：要寫(xiě)入的屬性鍵（字符串或者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接收2個(gè)參數(shù)：
1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象
2.key：要寫(xiě)入的屬性鍵（字符串或者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當(dāng)外部要?jiǎng)h除proxy的屬性就會(huì)觸發(fā)deleteProperty函數(shù)
setProptotypeOf接收2個(gè)參數(shù)
1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象
2.proto：作為原型使用的對(duì)象
let target = {}
let proxy = new Proxy(target, {
// 訪(fǎng)問(wèn)時(shí)調(diào)用
getPrototypeOf(trapTarget) {
return null
},
// 改變時(shí)調(diào)用
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, {}) // 拋出錯(cuò)誤如果正常實(shí)現(xiàn)
let target = {}
let proxy = new Proxy(target, {
// 訪(fǎng)問(wèn)時(shí)調(diào)用
getPrototypeOf(trapTarget) {
return Reflect.getPrototypeOf(trapTarget)
},
// 改變時(shí)調(diào)用
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接收三個(gè)參數(shù)：
1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象
2.key：要寫(xiě)入的屬性鍵（字符串或者symbol）
3.descriptor：屬性的描述對(duì)象
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"
})在外部調(diào)用defineProperty | getOwnPropertyDescriptor時(shí)會(huì)觸發(fā)內(nèi)部definenProperty | getOwnPropertyDescriptor方法。
ownKeys陷阱會(huì)攔截外部的Object.keys()，Object.getOwnPropertyName(),Object.getOwnPropertySymbols()和Object.assign()四個(gè)方法
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)感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“ES6中的Proxy有什么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
