詳解VUE中的Proxy代理

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

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

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

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

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

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

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

下面對get函數(shù)進(jì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])

下面對set函數(shù)進(jì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]

下面對has函數(shù)進(jì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

下面對apply函數(shù)進(jì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

下面對construct函數(shù)進(jì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實現(xiàn)的雙向數(shù)據(jù)綁定

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

您可能感興趣的文章: