【ES6入門10】：Proxy和Reflect

Jokcy 發布于2019-08-23 12:33 / 1164人閱讀

摘要：代理原始對象，或者真實數據，可以理解為供應商代理對象，可以理解為代理商，對用戶來說，直接操作，而不能直接操作攔截對象屬性的讀取攔截對象設置屬性只讓用戶修改屬性，其他的不允許修改攔截操作只暴露屬性，其他的都不暴露攔截屬性名以下劃線開頭的，

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}
}

GPU云服務器云服務器 ES6入門 reflect go-reflect ES6

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98714.html

【資源集合】 ES6 元編程（Proxy & Reflect & Symbol）

摘要：理解元編程和是屬于元編程范疇的，能介入的對象底層操作進行的過程中，并加以影響。元編程中的元的概念可以理解為程序本身。中，便是兩個可以用來進行元編程的特性。在之后，標準引入了，從而提供比較完善的元編程能力。導讀幾年前 ES6 剛出來的時候接觸過元編程（Metaprogramming）的概念，不過當時還沒有深究。今天在應用和學習中不斷接觸到這概念，比如 mobx 5 中就用到了 Pr...

aikin 2019-08-23 11:28 評論0 收藏0
ECMAScript 6入門Proxy與Reflect(上)

摘要：與學習的新語法糖既能學習到新東西，又能使得自己的代碼更加優雅，逼格更高，爽與之間的運用就是對對象的操作觸發的攔截是對對象進行代理，通過生成的對象間接操作原本對象，最常見的就是與語法形式是需要操作的對象，而是包含操作對象的一些方法的對象是能夠 Proxy與Reflect 學習es6的新語法糖既能學習到新東西，又能使得自己的代碼更加優雅，逼格更高，爽proxy與Reflect之間的運用就是...

DevTTL 2019-08-23 14:25 評論0 收藏0
【ES6】改變 JS 內置行為的代理與反射

摘要：通過對這些底層內置對象的代理陷阱和反射函數，讓開發者能進一步接近引擎的能力。顯然，與要求代理目標對象必須是一個函數，這兩個代理陷阱在函數的執行方式上開啟了很多的可能性，結合使用就可以完全控制任意的代理目標函數的行為。代理（Proxy）可以攔截并改變 JS 引擎的底層操作，如數據讀取、屬性定義、函數構造等一系列操作。ES6 通過對這些底層內置對象的代理陷阱和反射函數，讓開發者能進一步接...

lushan 2019-08-23 15:07 評論0 收藏0
從ES6重新認識JavaScript設計模式(五): 代理模式和Proxy

摘要：此時，鏈家起到的作用就是代理的作用。驗證代理構造函數第二個參數中的方法，可以很方便的驗證向一個對象的傳值。 1 什么是代理模式 showImg(https://segmentfault.com/img/remote/1460000015800706?w=1262&h=464); 為其他對象提供一種代理以控制對這個對象的訪問。在某些情況下，一個對象不適合或者不能直接引用另一個對象，而代理...

verano 2019-08-23 10:27 評論0 收藏0
《深入理解ES6》筆記——代理（Proxy）和反射（Reflection）API（12）

摘要：方法與代理處理程序的方法相同。使用給目標函數傳入指定的參數。當然，不用反射也可以讀取的值。的例子我們可以理解成是攔截了方法，然后傳入參數，將返回值賦值給，這樣我們就能在需要讀取這個返回值的時候調用。這種代理模式和的代理有異曲同工之妙。反射 Reflect 當你見到一個新的API，不明白的時候，就在瀏覽器打印出來看看它的樣子。 showImg(https://segmentfault....

ZHAO_ 2019-08-21 16:06 評論0 收藏0