[JavaScript知识库]JavaScript Proxy学习笔记（一）

什么是Proxy对象

Proxy是代理的意思，顾名思义proxy对象主要作用也就是代理，通过proxy我们可以对一个对象的所有的操作进行拦截代理。比如说对象属性的查找、属性赋值、枚举和函数调用等等。

创建一个Proxy对象

const target = {}
const handler = {}
let proxy = new Proxy(target, handler);

上面代码

• target是我们代理的目标对象
• handler也是一个对象，用来控制目标对象的各种行为。

一个简单的例子

定义一个简单的user对象

const user = {
    name: '小帅',
    age: 23,
    email: 'admin@gmail.com',
}

创建一个handler对象，用来定义拦截目标对象的操作

const handler = {
    get(target, property) {
        console.log(`读取属性： ${property}`);
        return target[property];
    }
}

最后创建proxy对象

const proxyUser = new Proxy(user, handler);

proxyUser对象使用user对象来存储数据，同时也可以访问user对象的所有属性。

接着打印name和age属性

console.log(proxyUser.name);
// 输出：读取属性： name
// '小帅'
console.log(proxyUser.age);
// 输出：读取属性： age
// 23

当我们通过proxyUser去访问user对象的属性时，会经过proxy的handler对象中定义的get函数，所以console出读取属性： xxx。

那么如果我们修改原始的user对象，proxyUser对象也会随之变化。

user.country = 'china';
console.log(proxyUser.country);
//输出：读取属性： country
// china

同样，修改proxyUser对象，原始user对象也会随之改变。

proxyUser.wechat = 'cmdfas';
console.log(user.wechat);
//输出：cmdfas

思考

上面我们知道了Proxy对象的基础用法，我们可以通过Proxy对象做什么事情呢？

大家都知道Vue3使用了Proxy对象替换掉了Vue2中的Object.defineProperty()，还有哪些其他的案例呢？

今天就写到这吧，明天继续，欢迎在评论你的想法。

感兴趣，可关注我公众号【小帅的编程笔记】，跟着我每天进步一点点