詳解VUE中的Proxy代理

更新時(shí)間：2023年04月18日 10:08:15 作者：阿晨學(xué)前端

這篇文章主要介紹了Proxy代理對(duì)象詳解,Proxy 是ES6中提供的一個(gè)非常強(qiáng)大的功能，可以用來代理另一個(gè)對(duì)象，從而攔截、監(jiān)視并修改這個(gè)對(duì)象的各種操作,需要的朋友可以參考下

Proxy 是ES6中提供的一個(gè)非常強(qiáng)大的功能，可以用來代理另一個(gè)對(duì)象，從而攔截、監(jiān)視并修改這個(gè)對(duì)象的各種操作

首先是Proxy()的參數(shù)：

arget：被代理的對(duì)象。
handler：被代理對(duì)象上的自定義行為，也就是對(duì)arget進(jìn)行處理的地方

handler處理函數(shù)一都有：

get(target, propKey, receiver)：攔截對(duì)象屬性的讀取操作。
set(target, propKey, value, receiver)：攔截對(duì)象屬性的設(shè)置操作，返回一個(gè)布爾值
has(target, propKey)：攔截 propKey in proxy 操作，返回一個(gè)布爾值
deleteProperty(target, propKey)：攔截對(duì)象屬性的刪除操作，返回一個(gè)布爾值
apply(target, object, args)：攔截 Proxy 實(shí)例作為函數(shù)調(diào)用的操作。
construct(target, args, newTarget)：攔截 Proxy 實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，返回一個(gè)對(duì)象
......

下面對(duì)get函數(shù)進(jìn)行簡(jiǎn)單的演示：

let arr = [123,"ac","你好"]
arrPro = new Proxy(arr,{
    get(target,prop){
        // target 代表被代理的數(shù)組，也就是 [123,"ac","你好"]
        console.log(target)
        // prop 表示要訪問的屬性，也就是 0
        console.log(prop)
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arrPro[0])

下面對(duì)set函數(shù)進(jìn)行簡(jiǎn)單的演示：

let arr = []
let arrPro = new Proxy(arr,{
    set(target,prop,val){
        if(typeof val === "number"){
            target[prop] = val
            return true
        }else{
            return false
        }
    }
}) 
arrPro.push(5) 
console.log(arr)  //[5]

下面對(duì)has函數(shù)進(jìn)行簡(jiǎn)單的演示：

let range = {
    start:1,
    end:5
}
range = new Proxy(range,{
    has(target,prop){
       return prop >= target.start && prop <= target.end
    }
})
console.log(2 in range) // true
console.log(6 in range) // false

get、set、deleteProperty小集合：

let user = {
    name: 'ac',
    age: 12,
    _password: 'xxx'
}
 
user = new Proxy(user, {
    get(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可訪問')
        } else {
            return target[prop]
        }
    },
    set(target, prop, val) {
        if (prop.startsWith('_')) {
            throw new Error('不可設(shè)置')
        } else {
            target[prop] = val
            return true
        }
    },
    deleteProperty(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可刪除')
        } else {
            delete target[prop]
            return true
        }
    }
})
console.log(user.age)  //12
console.log(user._password)  //Error:不可訪問
 
user.age = 22
console.log(user.age)  //22
 
delete user.age
console.log(user.age)  //undefined

下面對(duì)apply函數(shù)進(jìn)行簡(jiǎn)單的演示：

let sum = (...args) =>{
    let num = 0
    args.forEach(item =>{
        num += item
    })
    return num
}
 
sum = new Proxy(sum,{
    apply(target,ctx,args){
        return target(...args) * 2
    }
})
console.log(sum(2,5)) //14
console.log(sum.call(null,2,5)) //14
console.log(sum.apply(null,[2,5]))  //14

下面對(duì)construct函數(shù)進(jìn)行簡(jiǎn)單的演示：

let User = class {
    constructor(name){
        this.name = name
    }
}
User = new Proxy(User,{
    construct(target,args,newTarget){
        console.log("代理攔截")  //代理攔截
        return new target(...args)  //User {name: 'ac'}
    }
})
 
console.log(new User('ac'))

vue3中就是用Proxy實(shí)現(xiàn)的雙向數(shù)據(jù)綁定

到此這篇關(guān)于Proxy代理對(duì)象詳解的文章就介紹到這了,更多相關(guān)Proxy代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: