Proxy

Proxy

Proxy 对象用于创建一个对象的代理，从而实现基本的拦截和自定义（如属性查找、赋值、枚举、函数调用等）操作。

参数

创建 Proxy 对象时，需要传入两个参数 target 和 handler 。

1. target ：指要代理的目标对象。

2. handler：指处理器对象，用于执行监视目标对象的各种操作。

3. 案例

    // 目标对象
    const person = {
    	name: 'Jack',
    	age: 20,
    }
    
    // handler 对象
    class handler {
    	// 获取目标对象的属性值
    	get(target, prop) {
    		return Reflect.get(target, prop)
    	};
    	// 修改目标对象的属性值/添加新的属性
    	set(target, prop, val) {
    		return Reflect.set(target, prop, val)
    	};
    	// 删除目标对象的属性
    	deleteProperty(target, prop) {
    		return Reflect.deleteProperty(target, prop)
    	}
    }
    
    // 实例化对象
    const proxy = new Proxy(person, handler)
    
    console.log(proxy.name); // Jack
    // 修改属性
    proxy.name = 'Lucy'
    console.log(proxy); // name: "Lucy", age: 20
    // 添加属性
    proxy.gender = '女'
    console.log(proxy) // name: "Lucy", age: 20, gender: "女"
    // 删除属性
    delete proxy.gender
    console.log(proxy) // name: "Lucy", age: 20
   

方法

​ Proxy.revocable() 方法可以用来创建一个可撤销的 **Proxy **对象。

​ 参数：该方法同样需要传入两个参数 target 和 handler 。

​ 返回值：该方法返回值是一个对象，其结构为：{“proxy”: proxy, “revoke”: revoke} 。

1. proxy：表示新生成的 Proxy 对象本身，相当于 new Proxy(target, handler) 。
2. revoke：指撤销方法，调用时无需参数，就可以撤销掉和它一起生成的 Proxy 对象，即：proxy 。

​ 案例

const person = {
	name: 'jeck',
	age: 20,
}

const revocable = Proxy.revocable(person, {
	get(terget, prop) {
		return Reflect.get(terget, prop)
	}
})

console.log(revocable.proxy.name);	// jeck
revocable.revoke()
console.log(revocable.proxy.name);	// 抛出 TypeError

参考文献