阅读数:102 评论数:0

一、概述

所有语言中的代理，其本实现的是对原对象的操作的拦截和一些自定义行为。

二、语法 

const p = new Proxy(target, handler)

1、target

可以是任何类型的对象，包括原生数组、函数，甚至另一个代理。

2、handler

通常以函数作为属性的对象。

（1）get

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

 1 var person = {
 2   name: "张三"
 3 };
 4 
 5 var proxy = new Proxy(person, {
 6   get: function(target, property) {
 7     if (property in target) {
 8       return target[property];
 9     } else {
10       throw new ReferenceError("Property \"" + property + "\" does not exist.");
11     }
12   }
13 });
14 
15 proxy.name // "张三"
16 proxy.age // 抛出一个错误

（2）set

set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。

 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 
12     // 对于满足条件的 age 属性以及其他属性，直接保存
13     obj[prop] = value;
14   }
15 };
16 
17 let person = new Proxy({}, validator);
18 
19 person.age = 100;
20 
21 person.age // 100
22 person.age = 'young' // 报错
23 person.age = 300 // 报错