Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
javascript中的代理是什么_Proxy对象如何使用?_创想鸟

javascript中的代理是什么_Proxy对象如何使用?

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的内置构造函数,通过 target 和 handler 参数实现对 get、set 等操作的可控拦截,常用于响应式系统、验证、日志等场景。

javascript中的代理是什么_proxy对象如何使用?

Proxy 是 JavaScript 中用于拦截并自定义对象基本操作的内置构造函数。 它不是用来替代对象的,而是“包一层”,在访问目标对象前加一道可控的拦截逻辑。常见用途包括数据响应式(如 Vue 3)、权限控制、日志记录、验证、懒加载等。

Proxy 的基本结构

创建一个 Proxy 需要两个参数:

target:要代理的真实对象(可以是普通对象、数组、函数,甚至另一个 Proxy) handler:一个配置对象,定义各种“陷阱”(trap),即你想拦截的操作,比如 get、set、has、deleteProperty 等

示例:

const obj = { name: ‘Alice’, age: 30 };
const proxy = new Proxy(obj, {
  get(target, prop) {
    console.log(`读取属性: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置 ${prop} = ${value}`);
    target[prop] = value;
    return true;
  }
});
proxy.name; // 输出:读取属性: name → “Alice”
proxy.age = 31; // 输出:设置 age = 31

常用 trap 及使用场景

并非所有操作都需要拦截,按需选择即可:

立即学习“Java免费学习笔记(深入)”;

get(target, prop, receiver):拦截属性读取。可用于默认值、计算属性、访问日志 set(target, prop, value, receiver):拦截属性赋值。适合数据校验、触发更新、拒绝非法写入 has(target, prop):拦截 in 操作符。可让某些属性“假装不存在” ownKeys(target):拦截 Object.keys()、for...in 等枚举操作。可用于隐藏私有属性(如以 _ 开头的) apply(target, thisArg, args):仅对函数生效,拦截函数调用。可用于装饰器、埋点、限流

注意陷阱和限制

Proxy 本身不改变原对象,但它的行为受目标对象的可变性影响:

如果 target 是不可扩展的(Object.preventExtensions()),你无法在 handler 中通过 defineProperty 添加新属性 如果 target 某属性是只读(writable: false),set trap 里必须返回 false 或抛错,否则会报 TypeError Proxy 不会自动代理嵌套对象 —— 想实现深层响应式,需要递归地对每个新对象再套一层 Proxy(Vue 3 的 reactive 就是这么做的) Proxy 实例与原对象不相等(proxy === obj 是 false),且 instanceof 判定仍指向原构造器(proxy instanceof Array 仍为 true)

一个实用小例子:带验证的用户对象

用 Proxy 实现邮箱格式校验 + 年龄范围限制:

const user = {};
const validatedUser = new Proxy(user, {
  set(target, key, value) {
    if (key === ’email’ && !/^S+@S+.S+$/.test(value)) {
      throw new Error(‘邮箱格式不正确’);
    }
    if (key === ‘age’ && (value 150)) {
      throw new Error(‘年龄必须在 0–150 之间’);
    }
    target[key] = value;
    return true;
  }
});
validatedUser.email = ‘test@example.com’; // ✅
validatedUser.age = 25; // ✅
validatedUser.email = ‘invalid’; // ❌ 抛错

基本上就这些。Proxy 的核心价值在于“可控介入”,不侵入原始逻辑,又能统一处理访问逻辑。用好它,能让代码更健壮、更灵活。

以上就是javascript中的代理是什么_Proxy对象如何使用?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1541781.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
为什么JavaScript的依赖注入很重要_它如何提高代码的可测试性?
上一篇 2025年12月21日 13:37:53
什么是事件循环_javascript的异步机制如何运作?
下一篇 2025年12月21日 13:38:05

相关推荐

发表回复

登录后才能评论
关注微信