ES6中Proxy的作用是什么

這篇文章主要介紹“ES6中Proxy的作用是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“ES6中Proxy的作用是什么”文章能幫助大家解決問(wèn)題。

創(chuàng)建一個(gè)簡(jiǎn)單的Proxy

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陷阱驗(yàn)證屬性

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陷阱驗(yàn)證對(duì)象結(jié)構(gòu)

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陷阱因此已有屬性

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) // true

用deleteProperty陷阱防止刪除屬性

deleteProperty接收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,getPrototypeOf)

setProptotypeOf接收2個(gè)參數(shù)

1.trapTarget：用于接收屬性（代理的目標(biāo)）的對(duì)象

2.proto：作為原型使用的對(duì)象

let target = {}

let proxy = new Proxy(target, {

    // 訪問(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, {

    // 訪問(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陷阱

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)

關(guān)于“ES6中Proxy的作用是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。