[es 6]Proxy 详解 — 常用拦截器示例

楼主^#

更多发布于：2022-07-20 10:54

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 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"}

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

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"}

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

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"}

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

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"}

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

&lt;pre class="brush:js;toolbar:false;"&gt;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"}&lt;/pre&gt;

更多示例, 请看阮一峰《ES6 入门教程》
参考：https://blog.csdn.net/fallsTheDust/article/details/124719199

喜欢0

知识需要管理，知识需要分享

发帖回复

« 返回列表

您需要登录后才可以回帖，登录或者注册

返回顶部

公众号

[es 6]Proxy 详解 — 常用拦截器示例

最新喜欢：