【ES6入門10】：Proxy和Reflect

Proxy代理

{
    // 原始對象，或者真實數據，能夠理解爲供應商
    let obj = {
        time: '2018-10-05',
        name: 'lucy',
        age: 16,
        _is: true
    };

    // 代理對象，能夠理解爲代理商，對用戶來講，直接操做monitor，而不能直接操做obj
    let monitor = new Proxy(obj, {
        // 攔截對象屬性的讀取
        get(target, key) {
            return target[key].replace('2018', '2019');
        },
        // 攔截對象設置屬性
        set(target, key, value) {
            // 只讓用戶修改name屬性，其餘的不容許修改
            if (key === 'name') {
                return target[key] = value;
            } else {
                return target[key];
            }
        },
        // 攔截 key in object 操做
        has(target, key) {
            // 只暴露name屬性，其餘的都不暴露
            if (key === 'name') {
                return target[key];
            } else {
                return false;
            }
        },
        // 攔截delete
        deleteProperty(target, key) {
            // 屬性名以_下劃線開頭的，就容許刪除，不然不容許刪除
            if (key.indexOf('_') > -1) {
                delete target[key];
                return true;
            } else {
                return target[key];
            }
        },
        // 攔截Object.keys Object.getOwnPropertySymbols, Object.getOwnPropertyNames
        ownKeys(target) {
            // 攔截了time屬性
            return Object.keys(target).filter(item => item != 'time');
        }
    });

    console.log('get', monitor.time); // 2019-10-05

    monitor.time = '2020';
    monitor.name = 'can';
    console.log('set', monitor.time, monitor.name); // 2019-10-05 can

    console.log('has', 'name' in monitor, 'time' in monitor); // true false

    delete monitor.time;
    delete monitor._is;
    console.log(monitor); // Proxy {time: "2018-10-05", name: "can", age: 16}

    console.log('ownKeys', Object.keys(monitor)) // ["name", "age"]
}

Reflect反射

反射的是 object，Reflect的方法跟Proxy同樣，都有get,set,has...

{
    let obj = {
        time: '2018-10-05',
        name: 'ahhh',
        age: 16,
        _is: true
    };
    console.log(Reflect.get(obj, 'time')); // 2018-10-05
    Reflect.set(obj, 'name', 'lxc');
    console.log(obj); // {time: "2018-10-05", name: "lxc", age: 16, _is: true}
    console.log(Reflect.has(obj, 'name')); // true
}

數據校驗例子

{
    function validator(target, validator) {
        return new Proxy(target, {
            _validator: validator,
            // 對set進行攔截
            set(target, key, value, proxy) {
                if (target.hasOwnProperty(key)) {
                    let va = this._validator[key]; // 拿到_validator配置好的方法
                    if (!!va(value)) {
                        // 容許修改
                        return Reflect.set(target, key, value, proxy);
                    } else {
                        // 拋出異常
                        throw Error(`不能設置${key}到${value}`);
                    }
                } else {
                    throw Error(`${key} 不存在`);
                }
            }
        });
    }

    const personValidators = {
        name(val) {
            // 若是name設置爲字符串，則容許修改，不然拋出異常
            return typeof val === 'string';
        },
        age(val) {
            // 若是age設置爲數值類型而且大於18，則容許修改，不然拋出異常
            return typeof val === 'number' && val > 18;
        }
    };

    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
            // 返回了一個Proxy對象，用戶操做的並非Person這個實例，而是這個實例的代理對象
            return validator(this, personValidators);
        }
    }

    const person = new Person('haha', 18);
    console.log(person); // Proxy {name: "haha", age: 18}

    // person.name = 46; // 不能設置name到46
    // person.age = 20; // 不能設置age到12
    // person.number = 111; // number 不存在

    person.name = 'yoyo';
    person.age = 20;
    console.log(person); // Proxy {name: "yoyo", age: 20}
}