JSProxy代理

前言

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据（对象，数组）的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。
想了解更多请戳：官方文档

语法
let p = new Proxy(target, handler);
参数
1、target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
2、handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的handler相关函数请查阅官网

简单示例：

<script>
    'use strict'
    const obj = {name: 'baidu', site: 'baidu.com'}
    let proxy = new Proxy(obj, {
    	// 获取属性 
      get (target, key){
        console.log('获取了getter属性');
        return target[key]
      }
    })
    console.log(proxy.name);
</script>

上方的案例，我们使用Proxy将obj对象包装起来，再返回给obj，此时的obj已经成为了一个Proxy实例，我们对其的操作，都会被Proxy拦截。Proxy有两个参数，第一个是target,也就是我们传入的obj对象,另一个则是handler，也就是我们传入的第二个参数，一个匿名对象。在handler中定义了一个名叫get的函数，当我们获取obj的属性时，则会触发此函数。
咱们再来试试使用set来拦截一些操作，并将get返回值更改

const person = {
	 name: '小明', 
	 age: 18, 
	 professional: 'student'
	}
    let xiaoming = new Proxy(person, {
      get(targetObj, propertyKey) {
        return targetObj[propertyKey]
      },
      set(targetObj, propertyKey, value) {
        if (propertyKey == 'age' && typeof value !== 'number') {
          throw Error('age字段必须是number类型')
        }
        targetObj[propertyKey] = value
        return Reflect.set(targetObj, propertyKey, value);  
        // 或者 return true
      }
    })
    xiaoming.age = 14
    console.log(xiaoming.name);
    console.log(xiaoming);

在严格模式'use strict' 下，没有return Reflect.set(targetObj, propertyKey, value); 亦会抛出错误，因为set函数必须返回一个boolean值，只有返回值为true时才表示修改成功，我们没有手动return，函数会自动返回undefined,undefined != true,所以报错是正常的

在 set 拦截函数中判断了如果是更改 age 属性时，类型不是 Number则抛出错误

最后,正确的输出了我们想要的结果!