购物网站排名2015_2023网页设计十大品牌_互联网优化_百度代发收录

ES6 中的 Proxy 概述

Proxy 是 JavaScript ES6 引入的一种新特性，它可以用来创建一个对象的代理，从而控制对该对象的访问、操作和行为。Proxy 可以拦截并自定义对象的各种操作，如读取属性、写入属性、函数调用等。它为 JavaScript 提供了一种强大的机制，允许你在对象操作上添加额外的行为。

Proxy 的基本语法

const proxy = new Proxy(target, handler);

• target：目标对象，Proxy 会拦截并代理这个对象。
• handler：一个对象，包含一系列用于拦截目标对象行为的函数。

常用的 Handler 方法

handler 对象中包含一组预定义的陷阱（traps），用于拦截不同的操作。常见的陷阱有：

• get：拦截属性的读取操作。
• set：拦截属性的设置操作。
• has：拦截 in 操作符的检查。
• deleteProperty：拦截 delete 操作符。
• apply：拦截函数调用。
• construct：拦截构造函数的调用。

基本用法

1. get 操作拦截

通过 get 捕获对象属性的读取。

const target = {message: 'Hello, World!'
};const handler = {get(target, prop, receiver) {if (prop === 'message') {return `${target[prop]} (from Proxy)`;}return prop in target ? target[prop] : 'Property not found';}
};const proxy = new Proxy(target, handler);console.log(proxy.message); // "Hello, World! (from Proxy)"
console.log(proxy.nonExistent); // "Property not found"

2. set 操作拦截

通过 set 捕获属性的设置操作。

const target = {age: 30
};const handler = {set(target, prop, value, receiver) {if (prop === 'age' && value < 0) {console.log('Age cannot be negative!');return false; // 阻止设置负值}target[prop] = value;return true;}
};const proxy = new Proxy(target, handler);proxy.age = -5; // "Age cannot be negative!"
proxy.age = 35; // 正常设置
console.log(proxy.age); // 35

3. apply 操作拦截

通过 apply 可以拦截函数调用。

const target