leju-admin-vue
/
05-proxy.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(1);

        let person = {
            name: "张三",
            age: 20
        }
        let validator = {
            set: function(obj, prop, value) {
                console.log(obj, prop, value)
                if (prop == "age") {
                    if (value > 150) {
                        throw new Error("你当前设置的价格超过最大范围!!!")
                    } else {
                        obj[prop] = value
                    }
                }
            }
        };
        let person1 = new Proxy(person, validator);
        person1.age = 400;
    </script>
    <!-- <script>
        // proxy:

        const movie = {
            title: "你的婚礼",
            price: "100元",
            time: "10:00"
        }

        var proxy = new Proxy(movie, {
            // get:
            // 第一个参数是 拦截的对象本身,  第二个参数是 代表对象的属性值,  第三个参数代表的是 Proxy 实例本身 一般不用
            get(target, attr) {
                console.log("触发了get");
                // return "hahaha"
                // 返回属性正常的值
                // 重新定义获取不到属性的结果
                if (attr in target) {
                    return target[attr];
                } else {
                    throw new ReferenceError("当前获取的属性" + attr + "找不到该属性!!!")
                }
            },

            // set:
            // 第一个参数是 拦截的对象本身,  第二个参数是 代表对象的属性值,  第三个参数是 代表对属性设置的值,   第四个参数代表的是 Proxy 实例本身 一般不用
            set(target, attr, value) {
                console.log("触发了set");
                console.log(value);

                // 设置属性的时候控制属性值的范围
                if (attr == "price") {
                    if (value > 300) {
                        throw new Error("你当前设置的价格超过最大范围!!!")
                    } else {
                        target[attr] = value;
                    }
                } else {
                    target[attr] = value;
                }
            }
        })

        // 获取属性值: 都要通过 Proxy 实例 来操作对象的属性
        console.log(proxy.title); // "hahaha"
        proxy.price = 200;
        console.log(proxy.price); // "hahaha"


        // console.log(proxy.say);

        // proxy.price = 400;
        proxy.price = 200;
        console.log(proxy.price);

        proxy.title = "嘻嘻嘻";
        console.log(proxy.title);
    </script> -->

</body>

</html>