javascript 搞懂proxy

写在前面的话

proxy英文意思为代理，代理人，何为代理呢，可以用警匪影视台词中经常出现的一句话：“有什么事情和我的律师说吧”，在这句话中原告可以理解为被代理对象，律师可以理解为代理对象。想要访问被代理的对象必须进过代理对象这一步，代理对象可以对访问的数据进行过滤，拦截等操作。

语法

const p = new Proxy(target, handler)

语法解释，target:被代理的对象，handler:由若干函数组成的对象，该对象中定义了代理行为，诸如设置值，获取值等。

常用的handler函数

1.handler.set()方法是设置属性值操作的捕获器。

语法

const p = new Proxy(target, {
  set: function(target, property, value, receiver) {
  }
});

语法解释：target:被代理的对象，property:对象的属性名，value:对象的属性值，receiver:代理对象，通常是proxy对象，也有可能是继承proxy的其他对象

小试牛刀：使用set函数对输入的值做类型限定，只允许赋值的类型为number

let p = new Proxy({a:1}, {
				set(target,prop,value,reciver){
					if(typeof value =="number")
					target[prop]=value
					else{
						console.error("this must number")
					}
				}
			});
			p.a="3"
    console.log('p.a',p.a)//1

以上代码中依次打印出 “this.must number” 和 1 ,因为在给对象的a属性赋值的时候set会先对要赋的值进行类型判断，如果不为numbe类型就抛出“this must number”的警告，并且不进行赋值。只要将代码中的p.a="3"换成p.a=3就可以赋值成功了。

2.handler.get()方法是拦截读取属性操作

语法

const p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});

语法解释：target:被代理的对象，property:对象的属性名，receiver:代理对象，通常是proxy对象，也有可能是继承proxy的其他对象

小试牛刀：使用get函数对获取值的操作进行平方根操作

let p = new Proxy({a:2}, {
				get(target,prop,reciver){
					let _num=target[prop];
					if(typeof _num =="number")
					return _num*_num
					else{
						console.error("this must number")
					}
				}
			});
			console.log('p.a',p.a)//4

进过代理之后，只有读取的值是number类型的就会读取出他值的平方。

3.handler.has() 方法是针对 in 操作符的代理方法。

语法

var p = new Proxy(target, {
  has: function(target, prop) {
  }
});

语法解析：target:被代理的对象，prop:对象的属性名

小试牛刀：不管属性是不是对象存在对象之中都返回 false

	let p = new Proxy({a:2}, {
				has(target,prop){
					return false
				}
			});
			console.log('p.a','a' in p)//false

总结

还有很多handler 的函数方法就不一一讲解了，本篇文章就是带大家了解一下proxy的基础使用，不知道大家有没有发现，proxy对象只能对引用类型的对象进行代理，那么如果是基本类型的对象诸如number 该如何实现代理呢。其实很简单，可以将基本对象作为属性，封装在引用对象中。