JavaScript的Proxy可以做哪些有意思的事儿

Proxy是什么

首先，我们要清楚，Proxy是什么意思，这个单词翻译过来，就是 代理。

可以理解为，有一个很火的明星，开通了一个微博账号，这个账号非常活跃，回复粉丝、到处点赞之类的，但可能并不是真的由本人在维护的。

而是在背后有一个其他人 or 团队来运营，我们就可以称他们为代理人，因为他们发表的微博就代表了明星本人的意思。

P.S. 强行举例子，因为本人不追星，只是猜测可能会有这样的运营团队

这个代入到JavaScript当中来，就可以理解为对对象或者函数的代理操作。

JavaScript中的Proxy

Proxy是ES6中提供的新的API，可以用来定义对象各种基本操作的自定义行为 （在文档中被称为traps，我觉得可以理解为一个针对对象各种行为的钩子），拿它可以做很多有意思的事情，在我们需要对一些对象的行为进行控制时将变得非常有效。

Proxy的语法

创建一个Proxy的实例需要传入两个参数

1.target 要被代理的对象，可以是一个object或者function

2.handlers对该代理对象的各种操作行为处理

let target = {}let handlers = {} // do nothinglet proxy = new Proxy(target, handlers)proxy.a = 123console.log(target.a) // 123

在第二个参数为空对象的情况下，基本可以理解为是对第一个参数做的一次浅拷贝
（Proxy必须是浅拷贝，如果是深拷贝则会失去了代理的意义）

Traps(各种行为的代理)

就像上边的示例代码一样，如果没有定义对应的trap，则不会起任何作用，相当于直接操作了target。

当我们写了某个trap以后，在做对应的动作时，就会触发我们的回调函数，由我们来控制被代理对象的行为。

最常用的两个trap应该就是get和set了。

早年JavaScript有着在定义对象时针对某个属性进行设置getter、setter：

let obj = {_age: 18,get age () {return `I'm ${this._age} years old`},set age (val) {this._age = Number(val)}}console.log(obj.age) // I'm 18 years oldobj.age = 19console.log(obj.age) // I'm 19 years old

就像这段代码描述的一样，我们设置了一个属性_age，然后又设置了一个get age和set age。

然后我们可以直接调用obj.age来获取一个返回值，也可以对其进行赋值。

这么做有几个缺点：

1.针对每一个要代理的属性都要编写对应的getter、setter。

2.必须还要存在一个存储真实值的key（如果我们直接在getter里边调用this.age则会出现堆栈溢出的情况，因为无论何时调用this.age进行取值都会触发getter）。

Proxy很好的解决了这两个问题：

let target = { age: 18, name: 'Niko Bellic' }let handlers = {get (target, property) {return `${property}: ${target[property]}`},set (target, property, value) {target[property] = value}}let proxy = new Proxy(target, handlers)proxy.age = 19console.log(target.age, proxy.age) // 19, age : 19console.log(target.name, proxy.name) // Niko Bellic, name: Niko Bellic