ES6中Proxy和Reflect的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹ES6中Proxy和Reflect的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián) - 成都電信服務(wù)器托管，四川服務(wù)器租用，成都服務(wù)器租用，四川網(wǎng)通托管,綿陽(yáng)服務(wù)器托管，德陽(yáng)服務(wù)器托管，遂寧服務(wù)器托管，綿陽(yáng)服務(wù)器托管，四川云主機(jī)，成都云主機(jī)，西南云主機(jī)，成都電信服務(wù)器托管，西南服務(wù)器托管，四川/成都大帶寬，機(jī)柜大帶寬、租用·托管，四川老牌ＩＤＣ服務(wù)商

Proxy代理

{
    // 原始對(duì)象，或者真實(shí)數(shù)據(jù)，可以理解為供應(yīng)商
    let obj = {
        time: '2018-10-05',
        name: 'lucy',
        age: 16,
        _is: true
    };

    // 代理對(duì)象，可以理解為代理商，對(duì)用戶來(lái)說(shuō)，直接操作monitor，而不能直接操作obj
    let monitor = new Proxy(obj, {
        // 攔截對(duì)象屬性的讀取
        get(target, key) {
            return target[key].replace('2018', '2019');
        },
        // 攔截對(duì)象設(shè)置屬性
        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一樣，都有g(shù)et,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
}
數(shù)據(jù)校驗(yàn)例子
{
    function validator(target, validator) {
        return new Proxy(target, {
            _validator: validator,
            // 對(duì)set進(jìn)行攔截
            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(`不能設(shè)置${key}到${value}`);
                    }
                } else {
                    throw Error(`${key} 不存在`);
                }
            }
        });
    }

    const personValidators = {
        name(val) {
            // 如果name設(shè)置為字符串，則允許修改，否則拋出異常
            return typeof val === 'string';
        },
        age(val) {
            // 如果age設(shè)置為數(shù)值類型并且大于18，則允許修改，否則拋出異常
            return typeof val === 'number' && val > 18;
        }
    };

    class Person {
        constructor(name, age) {
            this.name = name;
            this.age = age;
            // 返回了一個(gè)Proxy對(duì)象，用戶操作的并不是Person這個(gè)實(shí)例，而是這個(gè)實(shí)例的代理對(duì)象
            return validator(this, personValidators);
        }
    }

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

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

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

以上是“ES6中Proxy和Reflect的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：ES6中Proxy和Reflect的示例分析-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://muchs.cn/article24/dpeice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、搜索引擎優(yōu)化、網(wǎng)站改版、網(wǎng)站維護(hù)、全網(wǎng)營(yíng)銷推廣、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷型網(wǎng)站建設(shè)