Proxy 详解 — 常用拦截器示例

用户9914333

发布于 2022-07-22 15:05:13

3250

发布于 2022-07-22 15:05:13

文章被收录于专栏：bug收集

0 1

Proxy 简介

proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

0 2

Proxy 拦截列表

下面是 Proxy 支持的拦截操作一览，一共 13 种。

get(target, propKey, receiver)：拦截对象属性的读取
set(target, propKey, value, receiver)：拦截对象属性的设置
has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

0 3

常用拦截方法

1. get 拦截对象属性的读取

let arr = [7, 8, 9];
arr = new Proxy(arr, {
    get(target, prop) {
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arr[3]) //error
console.log(arr[1]) //8

2. set 拦截对象属性的设置，返回一个布尔值

let arr = [7, 8, 9];
newArr = new Proxy(arr, {
    set(target, prop, val) {
        if (typeof(val) === 'number') {
            target[prop] = val
            return true
        } else {
            return false
        }
    }
})
newArr.push(2)
console.log(newArr[1]) //8
console.log(arr) //[7, 8, 9, 2]
newArr.push(11)
console.log(arr) //[7, 8, 9, 2, 11]

3. apply 拦截函数的调用、call和apply操作

let sum = function(...args) {
    let count = 0;
    args.forEach((item) => {
        count += item
    })
    return count;
};


let p = new Proxy(sum, {
    apply(target, ctx, args) {
        return target(...args) * 2
    }
})
console.log(p(1, 2, 3, 4)) //20
console.log(p.call(null, 1, 2, 3, 4)) //20
console.log(p.apply(null, [1, 2, 3, 4])) //20

4. construct 拦截 new 命令，返回一个对象

let User = class {
    constructor(name) {
        this.name = name;
    }
}


User = new Proxy(User, {
    construct(target, args, newTarget) {
        return new target(...args)
    }
})


console.log(new User('kiw')) //{name: "kiw"}

5. has 拦截propKey in proxy 的操作，返回一个布尔值

let range = {
    start: 1,
    end: 5,
}


range = new Proxy(range, {
    has(target, prop) {
        return prop >= target.start && prop <= target.end;
    }
})
console.log(3 in range) //true
console.log(6 in range) //false

6. ownKeys 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbol(proxy)、Object.keys(proxy)、 for.....in循环返回一个数组

let userinfo = {
    username: 'kiw',
    age: 18,
    _password: '***',
    [Symbol()]: '我是唯一的',
};


let p = new Proxy(userinfo, {
    ownKeys(target) {
        return Object.keys(target).filter(item => {
            return !item.startsWith('_')
        })
    }
})


console.log(Object.getOwnPropertyNames(p)) //["username", "age"]
console.log(Object.getOwnPropertySymbols(p)) //[]
console.log(Object.keys(p)) //["username", "age"]


for (const key in p) {
    const element = p[key];
    console.log(element) //kiw 18
}

7. deleteProperty 拦截delete proxy[propKey]的操作，返回一个布尔值

let obj = {
    username: 'kiw',
    age: 18,
}
let p = new Proxy(obj, {
    deleteProperty(target, prop) {
        delete target[prop]
        return true
    }
})
delete p.age;
console.log(obj) //{username:"kiw"}

更多示例, 请看阮一峰《ES6 入门教程》

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2022-07-16，如有侵权请联系 cloudcommunity@tencent.com 删除

网络安全