<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 这个是基于我们ES6的新语法,window.Proxy对象实现的
        // 通过Proxy创建的代理对象
        // 目标对象
        let user = {
            name : "Jack"
        };
        // 通过Proxy生成代理对象
        let userProxy = new Proxy(user,{
            // 主要是通过这些配置项实现响应式的
            // 当你读取的时候get执行
            get(target,propertyName){
                // target代表目标对象,propertyName代表目标上的某个属性
                console.log(target);
                console.log(propertyName);
                console.log(typeof propertyName);
                return Reflect.get(target,propertyName)
            },
            // 当你修改某属性或新增某个属性的时候执行
            set(target,propertyName,value){
                // target代表目标对象,propertyName代表目标上的某个属性
                // target[propertyName] = value;
                Reflect.set(target,propertyName,value);
            },
            // 当你删除某个属性的时候
            deleteProperty(target,propertyName){
                // target代表目标对象,propertyName代表目标上的某个属性
                // 必须要返回,不返回默认返回值就变成undefined了(false)
                return Reflect.deleteProperty(target,propertyName);
            }
        });
        // 代理模式的原理:通过代理对象完成目标对象的任务,同时还可以顺带新增一些程序
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建一个user1对象
        let user1 = {
            name : "Jack"
        };
        // 创建一个user2对象
        let user2 = {};
        // 给user2扩展一个name属性
        Object.defineProperty(user2,"name",{
            // 数据代理
            get(){
                console.log("get方法执行了")
                return user1.name;
            },
            // 数据劫持
            set(value){
                // 改数据
                user1.name = value;
                console.log("页面更新了");
            }
        });
        // 成也萧何败也萧何
        // 这个会导致我们的属性新增或删除没有响应式处理
    </script>
</body>
</html>