本文共 1884 字，大约阅读时间需要 6 分钟。

一、相关API

二、Proxy应用场景

1.数据校验

表单提交的时候做数据校验，例如年龄是不是满足条件，数据类型是不是满足要求等等，这场场景非常适合使用Proxy。

下面展示与业务解耦的校验功能

1）ES6实现方式

{    function validator(target, validator) {        return new Proxy(target, {            _validator: validator,　　　　　　　//set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。            set(target, key, value, proxy) {                if (target.hasOwnProperty(key)) {                    let va = this._validator[key]                    if (!!va(value)) {                        return Reflect.set(target, key, value, proxy)                    } else {                        throw Error(`不能设置${key}到${value}`)                    }                } else {                    throw Error(`${key}不存在`)                }            }        })    }    const personValidators = {        name(val) {            return typeof val === 'string'        },        age(val) {            return typeof val === 'number' && val > 18        }    }    class Person {        constructor(name, age) {            this.name = name;            this.age = age            return validator(this, personValidators)        }    }    const person = new Person('knyel', 30)    console.log(person)    person.name = 'lk'    console.log(person)    person.age = 12    console.log(person)}

输出结果为

Proxy {name: "knyel", age: 30}Proxy {name: "lk", age: 30}Uncaught Error: 不能设置age到12    at Object.set (index.js:144)    at Object.
   
     (index.js:174)    at __webpack_require__ (index.js:20)    at Object.obj.time (index.js:80)    at __webpack_require__ (index.js:20)    at Object.
    
      (index.js:70)    at __webpack_require__ (index.js:20)    at index.js:63    at index.js:66
    
   

2）ES5实现方式

传统的方式对某个属性进行限制的时候，需要对他进行判断，判断类型是不是合适，是不是满足某种条件，然后才允许它进行修改。

3）对比

用了ES6代理的方式，可以将条件和对象本身（业务逻辑）完全隔离开，后期代码维护中，比如要加一个手机号的验证，我们只需要在修改类Person（添加手机号属性），personValidators（添加手机号验证规则），这样就可以实现了。代码的扩展性、可维护性和健壮性是非常强的。

转载地址：https://blog.csdn.net/namechenfl/article/details/84256583 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！