Proxy

Proxy的学习

概念

在 ES6 标准中新增的一个非常强大的功能是 Proxy，它可以自定义一些常用行为如查找、赋值、枚举、函数调用等。通过 Proxy 这个名称也可以看出来它包含了“代理”的含义，只要有“代理”的诉求都可以考虑使用 Proxy 来实现。可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

基本语法

let p = new Proxy(target,handler)

参数	含义
target	目标对象，被代理后不能直接被访问
handler	用来定制拦截行为的对象

例子

简单使用 get 拦截

// target
let o = {
    name: 'xiaoming',
    age: 20
}
// handler
let handler = {
    get(target, propKey) {
        return Reflect.has(target, propKey) ? target[propKey] : '';
    }
}
let p = new Proxy(o, handler)
console.log(p.from);	// ''

handler没有设置任何拦截，等同于直接通向原对象

let target = {}
let proxy = new Proxy(target, {})
proxy.a = 'b'
console.log(target.a);  // b

Proxy 支持的拦截操作

有13种

方法	目的
get(target,propKey,receiver)	拦截对象属性的读取
set(target,propKey,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循环
apply(target,object,args)	拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)
construct(target, args)	拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)
…	…

学习资料

学习文章
学习文章