您好,登錄后才能下訂單哦!
這篇文章主要介紹了ES6中的Proxy有什么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
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í)會在目標(biāo)上創(chuàng)建name,代理只是簡單的將操作轉(zhuǎn)發(fā)給目標(biāo),他不會儲存這個(gè)屬性。相當(dāng)于proxy.name和target.name引用的都是target.name的值。
set陷阱接收四個(gè)參數(shù):
1.trapTarget:用于接收屬性(代理的目標(biāo))的對象
2.key:要寫入的屬性鍵(字符串或者symbol)
3.value:被寫入的屬性值
4.receiver:操作發(fā)生的對象(通常是代理)
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" // 這里會報(bào)錯(cuò)因?yàn)椴粩?shù)字
這個(gè)實(shí)例每次在外面改變proxy的值時(shí)就會出發(fā)set函數(shù)。
get接收3個(gè)參數(shù)
1.trapTarget:用于接收屬性(代理的目標(biāo))的對象
2.key:要寫入的屬性鍵(字符串或者symbol)
3.receiver:操作發(fā)生的對象(通常是代理)
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) // 屬性不存在會拋出錯(cuò)誤
當(dāng)我們訪問proxy創(chuàng)建的對象屬性時(shí)就會觸發(fā)get方法
has接收2個(gè)參數(shù):
1.trapTarget:用于接收屬性(代理的目標(biāo))的對象
2.key:要寫入的屬性鍵(字符串或者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
deleteProperty接收2個(gè)參數(shù):
1.trapTarget:用于接收屬性(代理的目標(biāo))的對象
2.key:要寫入的屬性鍵(字符串或者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的屬性就會觸發(fā)deleteProperty函數(shù)
setProptotypeOf接收2個(gè)參數(shù)
1.trapTarget:用于接收屬性(代理的目標(biāo))的對象
2.proto:作為原型使用的對象
let target = {} let proxy = new Proxy(target, { // 訪問時(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, { // 訪問時(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))的對象
2.key:要寫入的屬性鍵(字符串或者symbol)
3.descriptor:屬性的描述對象
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í)會觸發(fā)內(nèi)部definenProperty | getOwnPropertyDescriptor方法。
ownKeys陷阱會攔截外部的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有什么用”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。