JavaScript的Proxy对象详解

极客

　　这篇文章主要为大家介绍了JavaScript的Proxy对象，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

一、Proxy 是什么？
　　Proxy 对象用于拦截并修改目标对象的指定操作。

2. // 语法
3. const p = new Proxy(target, handler)

复制代码

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

二、怎么用？

1、使用 Proxy 的简单实例
　　访问不存在的属性，设置默认值返回而不返回 undefined

2. // 1、找到合适的 handler 并编写代码
3. const handler = {
4.     get: function(obj, prop) {
5.         return prop in obj ? obj[prop] : 37;
6.     }
7. };
8. // 2、新建 Proxy 对象
9. const p = new Proxy({}, handler);
10. // 3、执行操作
11. p.a = 1;
12. p.b = undefined;
13. // 4、查看结果
14. console.log(p.a, p.b);      // 1, undefined
15. console.log('c' in p, p.c); // false, 37

复制代码

2、目标对象被正确修改

2. let target = {};
3. let p = new Proxy(target, {});
4. p.a = 37;   // 操作转发到目标
5. console.log(target.a);    // 37. 操作已经被正确地转发

复制代码

3、使用 set handler 做数据验证

2. let validator = {
3.   set: function(obj, prop, value) {
4.     if (prop === 'age') {
5.       if (!Number.isInteger(value)) {
6.         throw new TypeError('The age is not an integer');
7.       }
8.       if (value > 200) {
9.         throw new RangeError('The age seems invalid');
10.       }
11.     }
12.     // The default behavior to store the value
13.     obj[prop] = value;
14.     // 表示成功
15.     return true;
16.   }
17. };
18. let person = new Proxy({}, validator);
19. person.age = 100;
20. console.log(person.age);
21. // 100
22. person.age = 'young';
23. // 抛出异常: Uncaught TypeError: The age is not an integer
24. person.age = 300;
25. // 抛出异常: Uncaught RangeError: The age seems invalid

复制代码

4、扩展构造函数

2. function extend(sup, base) {
3.   var descriptor = Object.getOwnPropertyDescriptor(
4.     base.prototype, "constructor"
5.   );
6.   base.prototype = Object.create(sup.prototype);
7.   var handler = {
8.     construct: function(target, args) {
9.       var obj = Object.create(base.prototype);
10.       this.apply(target, obj, args);
11.       return obj;
12.     },
13.     apply: function(target, that, args) {
14.       sup.apply(that, args);
15.       base.apply(that, args);
16.     }
17.   };
18.   var proxy = new Proxy(base, handler);
19.   descriptor.value = proxy;
20.   Object.defineProperty(base.prototype, "constructor", descriptor);
21.   return proxy;
22. }
23. var Person = function (name) {
24.   this.name = name
25. };
26. var Boy = extend(Person, function (name, age) {
27.   this.age = age;
28. });
29. Boy.prototype.sex = "M";
30. var Peter = new Boy("Peter", 13);
31. console.log(Peter.sex);  // "M"
32. console.log(Peter.name); // "Peter"
33. console.log(Peter.age);  // 13

复制代码

总结
　　本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

---