耀极客论坛

 找回密码
 立即注册
查看: 657|回复: 0

JavaScript的Proxy对象详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:15:22 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了JavaScript的Proxy对象,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

一、Proxy 是什么?
  Proxy 对象用于拦截并修改目标对象的指定操作。
  1. // 语法
  2. const p = new Proxy(target, handler)
复制代码

  • target :目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
  • handler :以函数作为属性的对象,实现拦截和自定义操作。

二、怎么用?

1、使用 Proxy 的简单实例
  访问不存在的属性,设置默认值返回而不返回 undefined
  1. // 1、找到合适的 handler 并编写代码
  2. const handler = {
  3.     get: function(obj, prop) {
  4.         return prop in obj ? obj[prop] : 37;
  5.     }
  6. };
  7. // 2、新建 Proxy 对象
  8. const p = new Proxy({}, handler);
  9. // 3、执行操作
  10. p.a = 1;
  11. p.b = undefined;
  12. // 4、查看结果
  13. console.log(p.a, p.b);      // 1, undefined
  14. console.log('c' in p, p.c); // false, 37
复制代码
2、目标对象被正确修改
  1. let target = {};
  2. let p = new Proxy(target, {});
  3. p.a = 37;   // 操作转发到目标
  4. console.log(target.a);    // 37. 操作已经被正确地转发
复制代码
3、使用 set handler 做数据验证
  1. let validator = {
  2.   set: function(obj, prop, value) {
  3.     if (prop === 'age') {
  4.       if (!Number.isInteger(value)) {
  5.         throw new TypeError('The age is not an integer');
  6.       }
  7.       if (value > 200) {
  8.         throw new RangeError('The age seems invalid');
  9.       }
  10.     }
  11.     // The default behavior to store the value
  12.     obj[prop] = value;
  13.     // 表示成功
  14.     return true;
  15.   }
  16. };
  17. let person = new Proxy({}, validator);
  18. person.age = 100;
  19. console.log(person.age);
  20. // 100
  21. person.age = 'young';
  22. // 抛出异常: Uncaught TypeError: The age is not an integer
  23. person.age = 300;
  24. // 抛出异常: Uncaught RangeError: The age seems invalid
复制代码
4、扩展构造函数
  1. function extend(sup, base) {
  2.   var descriptor = Object.getOwnPropertyDescriptor(
  3.     base.prototype, "constructor"
  4.   );
  5.   base.prototype = Object.create(sup.prototype);
  6.   var handler = {
  7.     construct: function(target, args) {
  8.       var obj = Object.create(base.prototype);
  9.       this.apply(target, obj, args);
  10.       return obj;
  11.     },
  12.     apply: function(target, that, args) {
  13.       sup.apply(that, args);
  14.       base.apply(that, args);
  15.     }
  16.   };
  17.   var proxy = new Proxy(base, handler);
  18.   descriptor.value = proxy;
  19.   Object.defineProperty(base.prototype, "constructor", descriptor);
  20.   return proxy;
  21. }
  22. var Person = function (name) {
  23.   this.name = name
  24. };
  25. var Boy = extend(Person, function (name, age) {
  26.   this.age = age;
  27. });
  28. Boy.prototype.sex = "M";
  29. var Peter = new Boy("Peter", 13);
  30. console.log(Peter.sex);  // "M"
  31. console.log(Peter.name); // "Peter"
  32. console.log(Peter.age);  // 13
复制代码
总结
  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:27 , Processed in 0.065515 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表