- Proxy
Proxy是ES6+中的一个新类型，它可以帮助我们拦截并修改对象的默认行为。使用Proxy可以在对象上设置各种附加逻辑，例如：属性读取、赋值、函数调用等等。
- 创建Proxy
在ES6+中，我们可以使用new关键字来创建一个Proxy。例如：
const obj = { name: 'Alice', age: 20 }; const handler = { get(target, key) { console.log(`Get ${key}`); return target[key]; }, set(target, key, value) { console.log(`Set ${key}=${value}`); target[key] = value; } }; const proxy = new Proxy(obj, handler); console.log(proxy.name); // Get name Alice proxy.age = 21; // Set age=21
- 这里创建了一个普通对象obj，并使用Proxy创建了一个代理对象proxy。在handler中定义了对于get和set操作的拦截器，当执行proxy的属性读取和赋值操作时，会输出相关信息。
- Reflect
Reflect是ES6+中的另一个新类型，它可以帮助我们更加方便地进行反射操作。使用Reflect可以让我们更加方便地调用对象的默认行为，并进行一些附加逻辑。
- 使用Reflect进行对象操作
在ES6+中，我们可以使用Reflect对对象进行读取、赋值、函数调用等操作。例如：
const obj = { name: 'Alice', age: 20, sayHello() { console.log(`Hello, my name is ${this.name}`); } }; console.log(Reflect.get(obj, 'name')); // Alice Reflect.set(obj, 'age', 21); obj.sayHello(); // Hello, my name is Alice
- 这里使用Reflect对普通对象obj进行了属性读取、赋值和函数调用操作。
- 使用Reflect进行拦截操作
在ES6+中，我们也可以使用Reflect对Proxy进行一些拦截操作。例如：
const obj = { name: 'Alice', age: 20 }; const handler = { get(target, key) { console.log(`Get ${key}`); return Reflect.get(target, key); }, set(target, key, value) { console.log(`Set ${key}=${value}`); return Reflect.set(target, key, value); } }; const proxy = new Proxy(obj, handler); console.log(proxy.name); // Get name Alice proxy.age = 21; // Set age=21
- 这里在handler中使用Reflect.get和Reflect.set方法来拦截proxy的属性读取和赋值操作，并添加了相关信息的输出。
总结
通过本文的介绍，我们了解了JavaScript中的Proxy和Reflect。这些新特性可以帮助我们更加方便地拦截并修改对象的默认行为，以及进行反射操作。在实际开发中，我们需要根据需求来选择合适的编程方式，以便更加方便和有效地编写代码。
