浅谈ES6中的Proxy

Posted 2020-08-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈ES6中的Proxy相关的知识，希望对你有一定的参考价值。

Proxy是一个很有趣的对象，它能够修改某些操作的默认行为，等同于在语言层面做出修改，属于一种‘元编程’，即对编程语言进行编程。

Proxy其实很好理解，就是在目标对象之前架设一层拦截，外界的访问都得通过这层拦截，所以我们可以实现对外界访问的过滤和改写。

Proxy的使用其实很简单，举几个栗子你就清楚了：

我们重新定义属性的读取（get）和设置（set）行为，当我读取Person对象的age属性时，当age属性值大于100时，就让它等于99：

var person = {
    name:‘fancy‘,
    age:123
}//定义一个对象
var  proxy = new Proxy(person,//第一个参数传要代理的对象
{//第二个参数传要重定义的属性
    get:(target,key)=>{
        if (key == ‘age‘&& target[key] > 100) {
            return 99
        }else{
            return target[key]
        }
    }
});
proxy.name //fancy
proxy.age //99
person.age //123

我们创建了一个Proxy对象去代理person对象，并将属性的get方法重定义，当属性值等于‘age’并且值大于100时，返回99，否则直接返回属性值。get接收两个参数，第一个是原对象，第二个是属性名。

数据打印出来后，发现proxy的age值变成了99，而person的age值仍然是123，proxy实际上是重载（overload）了点运算符，用自己的定义覆盖了语言的原始定义。

我们再用set方法用来拦截某个属性的赋值操作。

假定Person对象有一个age属性，该属性应该是一个不大于200的整数，那么可以使用Proxy保证age的属性值符合要求。

let validator = {
  set: function(obj, prop, value) {
    if (prop === ‘age‘) {
      if (!Number.isInteger(value)) {
        throw new TypeError(‘The age is not an integer‘);
      }
      if (value > 200) {
        throw new RangeError(‘The age seems invalid‘);
      }
    }
    // 对于age以外的属性，直接保存
    obj[prop] = value;
  }
};
let person = new Proxy({}, validator);

person.age = 100;

person.age // 100
person.age = ‘young‘ // 抛出异常:The age is not an integer
person.age = 300 // 抛出异常:The age seems invalid