Proxy中代理數(shù)據(jù)攔截的方法詳解

更新時(shí)間：2022年12月02日 14:29:05 作者：叫我詹躲躲

這篇文章主要為大家詳細(xì)介紹了Proxy中代理數(shù)據(jù)攔截的方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以參考一下

proxy

Proxy 對象用于創(chuàng)建一個(gè)對象的代理，從而實(shí)現(xiàn)基本操作的攔截和自定義（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

new Proxy(target,handler)

// target 是proxy 要包裝的對象 （可以是數(shù)組、函數(shù)，也可以是另一個(gè)Proxy）
//handler 一個(gè)通常以函數(shù)作為屬性的對象，用來定制攔截行為

基本的語法是：

const p = new Proxy(target,handler)

主要的方法有: handler.has() 是針對 in 操作符的代理方法

handler.set() 方法是設(shè)置屬性值操作的捕獲器。

handler.get() 方法用于攔截對象的讀取屬性操作。

handler.defineProperty() 用于攔截對對象的 Object.defineProperty() 操作。

handler.deleteProperty() 方法用于攔截對對象屬性的 delete 操作。

handler.has()方法

const obj = {
    name: '微芒不朽',
    occupation: '前端開發(fā)'
}

const handler = {
    has(target, key) {
        //判斷是否存在該屬性
        return key in target
    }
}


const p = new Proxy(obj, handler)
console.log(p.name) //微芒不朽
console.log(p.like) //undefined
console.log(p.occupation) //前端開發(fā)

handler.get()方法

const obj = {
    name: '微芒不朽',
    occupation: '前端開發(fā)'
}

const handler = {
    has(target, key) {
        //判斷是否存在該屬性
        return key in target
    },
    get(target, key) {
        if (key in target) {
            return target[key]
        } else {
            return new ReferenceError(key + '屬性不存在')
        }
    }
}

const p = new Proxy(obj, handler)
console.log(p.name) //微芒不朽
console.log(p.like) //ReferenceError: like屬性不存在
console.log(p.occupation) //前端開發(fā)

handler.set()方法

const obj = {
    name: '微芒不朽',
    occupation: '前端開發(fā)'
}

const handler = {
    set(target, key) {
        if (key in target) {
            return Reflect.set(...arguments)
        }
        throw new ReferenceError(key+'屬性不存在')
    }
}

const p = new Proxy(obj, handler)
p.like = '編程' //Uncaught ReferenceError: like屬性不存在
// console.log(p.like)
p.occupation = '測試'
console.log(p.occupation) //測試

handler.defineProperty() 方法

用于攔截對對象的 Object.defineProperty() 操作

const obj = {
    name: '微芒不朽',
    configurable: true,
    enumerable: true,
}

const handler = {
    defineProperty(target, key, descriptor) {
        console.log('屬性', key)
        return true;
    }
}

const p = new Proxy({}, handler)
Object.defineProperty(p, 'like', obj) //屬性 like

也可以使用 Reflect.defineProperty

const obj = {
    name: '微芒不朽',
    configurable: true,
    enumerable: true,
}

const handler1 = {
    defineProperty(target, key, descriptor) {
        console.log('屬性1', descriptor)
        return Reflect.defineProperty(target, key, descriptor)
    }
}

const p1 = new Proxy({}, handler)
Object.defineProperty(p1, 'like', obj) //屬性 like

handler.deleteProperty() 方法

主要攔截對象的 delete操作；

const obj = {
    name: '微芒不朽',
}

const handler = {
    deleteProperty(target, key) {
        console.log('刪除' + key)
    }
}

const p = new Proxy({}, handler)
delete p.name //刪除name

//也會攔截 Reflect.deleteProperty
Reflect.deleteProperty(obj,'name')

Proxy.revocable 撤銷代理

proxy有一個(gè)唯一的靜態(tài)方法，Proxy.revocable(target, handler) Proxy.revocable()方法可以用來創(chuàng)建一個(gè)可撤銷的代理對象。該方法的返回值是一個(gè)對象，其結(jié)構(gòu)為： {"proxy": proxy, "revoke": revoke}

proxy 表示新生成的代理對象本身，和用一般方式 new Proxy(target, handler) 創(chuàng)建的代理對象沒什么不同，只是它可以被撤銷掉。
revoke 撤銷方法，調(diào)用的時(shí)候不需要加任何參數(shù)，就可以撤銷掉和它一起生成的那個(gè)代理對象。

const obj = {
    name: '微芒不朽',
}
const handler = {}
const { proxy, revoke } = Proxy.revocable(obj, handler)
console.log(proxy.name) //微芒不朽
revoke() // 取值完成對proxy進(jìn)行封閉，撤消代理
console.log(proxy.name) // Uncaught TypeError: illegal operation attempted on a revoked proxy

應(yīng)用場景

Proxy實(shí)現(xiàn)一個(gè)格式檢驗(yàn)器

場景：驗(yàn)證身份證、電話、姓名和郵箱

const obj = {
    certno: '420101198101012964',
    name: '微芒不朽1',
    tel: '123456789',
    mail: '13@qq.com',
}

const validators = {
    //校驗(yàn)證件號碼
    certno(val) {
        return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(val)
    },
    //校驗(yàn)姓名，只能為漢字
    name(val) {
        return /^[\u0391-\uFFE5]+$/.test(val)
    },
    //檢驗(yàn)電話或手機(jī)號
    tel(val) {
        return /^1\d{10}$|^0\d{2,3}-?\d{7,8}$/.test(val)
    },
    //檢驗(yàn)郵箱
    mail() {
        return /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/.test(val)
    }
}

const validatorType = (target, validator) => {
   return new Proxy(target, {
        _validator: validator,
        set(target, key, value, proxy) {
            let validator = this._validator[key](value)
            if (validator) {
                return Reflect.set(target, key, value, proxy)
            } else {
                throw Error(`設(shè)置${key} 的值為 ${value}，格式不正確`)
            }
        }
    })
}

const proxy = validatorType(obj, validators)
proxy.certno = '420101198101012964'
proxy.name = '微芒不朽1' //Uncaught Error: 設(shè)置name 的值為 微芒不朽1，格式不正確
proxy.tel = '123456789' //Uncaught Error: 設(shè)置tel 的值為 123456789，格式不正確
proxy.mail = '13@qq.com'

proxy 攔截私有屬性

用proxy攔截日常定義的私有屬性，使其不能更改；一般以下劃線開頭；

let obj = {
    _id:'1234567890',
    name:'微芒不朽'
}
const p = new Proxy(obj,{
    set(target,prop){
        if(prop[0]==='_'){
            throw Error( `${prop}為私有屬性`)
        }
        return Reflect.set(target,prop)
    }
})

p.name = '加油啊'
console.log(p.name) //加油啊
p._id = '123'
console.log(p._id) //Uncaught Error: _id為私有屬性

Reactive函數(shù)

用來綁定引用數(shù)據(jù)類型, 例如對象和數(shù)組等,實(shí)現(xiàn)響應(yīng)式。 Proxy 本質(zhì)上是對某個(gè)對象的劫持，這樣它不僅僅可以監(jiān)聽對象某個(gè)屬性值的變化，還可以監(jiān)聽對象屬性的新增和刪除。而 reactive 是 vue3 中對數(shù)據(jù)進(jìn)行劫持的核心。

//判斷是否為對象
function isObject(value) {
    return value != null && (typeof value === 'object' || typeof value === 'function')
}

function reactive(obj) {
    if (!isObject(obj)) {
        return obj
    }
    return new Proxy(obj, {
        get(target, key) {
            // TODO:收集依賴
            return Reflect.get(target, key)
        },
        set(target, key, value) {
            // TODO:觸發(fā)依賴
            return Reflect.set(target, key, value)
        }
    })
}
const state = reactive({
    name: '微芒不朽'
})
console.log(state) //Proxy代理的對象
// Proxy { <target>: {…}, <handler>: {…} }
// <target>: Object { name: "微芒不朽" }
// name: "微芒不朽"
// <prototype>: Object { … }
// <handler>: Object { get: get(target, key), set: set(target, key, value)
//  }
// get: function get(target, key)
// set: function set(target, key, value)

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

您可能感興趣的文章: