js - 对象补充

Object.defineProperty(目标对象，属性，属性描述符)：给目标对象设置或添加属性

        属性描述符：

            1. 数据描述符

                configurable

                enumerable

                writable

                value

            2. 读取描述符

                get()

                set(v)

Proxy

              - ES6提供的数据代理，表示由它来“代理”某些操作，可以称为“代理器"

              - new Proxy(要被代理的对象,{配置项}) ： 返回的实例对象，就是代理结果数据

                    配置项：也是一个对象，对该代理对象的各种操作行为处理。

hasOwnProperty

             - 查找一个对象是否有某个属性

             - hasOwnProperty 与 in 的区别：

            hasOwnProperty

            1. 如果是普通对象，则只检测当前对象中的实例属性是否存在

            2. 如果是原型对象，则只检测当前原型对象中原型属性是否存在

            in:

            无论属性是实例属性还是原型属性，只要是当前对象的属性，都返回true

<script>
        /*
            Object.defineProperty(目标对象，属性，属性描述符)：给目标对象设置或添加属性

            属性描述符：
            1. 数据描述符
                configurable
                enumerable
                writable
                value
            2. 读取描述符
                get()
                set(v)
        */
        let obj = {
            name:'张三',
            age:10
        };
        //1 属性描述符：数据描述符
        //1.1 设置obj对象中的name属性的描述
        Object.defineProperty(obj,'name',{
            configurable:false,//默认为false,禁止删除指定属性的描述符
            enumerable:false,//默认false,禁止通过for in 遍历当前对象
            writable:false,//默认false,禁止修改当前对象的指定属性
        })

        delete obj.name;
        console.log(obj);   //{age: 10, name: '张三'}

        for (let key in obj){
            console.log(key,obj[key]);  //age 10
        }

        obj.name='里斯';
        console.log(obj);   //{age: 10, name: '张三'}

        //1.2 给obj对象添加一个新的属性
        Object.defineProperty(obj,'sex',{
            value: 'women'
        })
        console.log(obj);   //{age: 10, name: '张三', sex: 'women'}


        //2 属性描述符：读取描述符
        // let obj1 = {};
        // obj1.name = "youyou";   //实际上是调用了方法中的setter方法
        // console.log(obj1.name); //实际是调用了方法中的getter方法

        //数据劫持
        //从原对象中劫持一份数据出来
        let object = {}; //新对象
        Object.defineProperties(object,{
            name:{
                get(){return obj.name;},//读取name
            },
            age:{
                get(){return obj.age;},//获取属性权限
                set(v){obj.age = v;}//设置属性的权限
                //setter 不能和writable 、value 一起使用。
            },
            sex: {
                get(){return obj.sex;}
            }
        });
        console.log(obj);   //{age: 10, name: '张三', sex: 'women'}
        console.log(object);//{}age: 10  name: '张三'  sex: 'women'
        object.age = 20;
        console.log(obj);   //{age: 20, name: '张三', sex: 'women'}
        console.log(object);//{}age: 20  name: '张三'  sex: 'women'
    </script>

<script>
        /*
            Proxy
                - ES6提供的数据代理，表示由它来“代理”某些操作，可以称为“代理器"
                - new Proxy(要被代理的对象,{配置项}) ： 返回的实例对象，就是代理结果数据
                    配置项：也是一个对象，对该代理对象的各种操作行为处理。
        */
       //声明一个对象(原始对象-明星)
       let obj2 = {
            name: '张三',
            age : 18,
            sex: '男'
        }
        // 找一个代理方（经济人）
        let object2 = new Proxy(obj2,{
            //获取原始对象中的数据
            get(target,property){
                //target : 代理的目标对象-obj
                //property: 代理的目标对象-obj的属性
                return target[property];  //自动遍历出目标对象中的所有的属性
            },
            //设置原始对象中的数据
            set(target,property,value){
                //target: 代理的目标对象-obj
                //property: 代理的目标对象的属性
                //value： 代理的目标对象的属性值
                target[property] = value;
                //注意：如果是简单修改，必须添加一个返回值为true
                return true;
            }
        })

        console.log(object2);   //Proxy {name: '张三', age: 18, sex: '男'}
        object2.age = 20;
        console.log(obj2);  //{name: '张三', age: 20, sex: '男'}
        console.log(object2);//Proxy {name: '张三', age: 20, sex: '男'}
    </script>

<script>
        /*
            hasOwnProperty
                - 查找一个对象是否有某个属性
            hasOwnProperty 与 in 的区别：
            hasOwnProperty
            1. 如果是普通对象，则只检测当前对象中的实例属性是否存在
            2. 如果是原型对象，则只检测当前原型对象中原型属性是否存在
            in:
            无论属性是实例属性还是原型属性，只要是当前对象的属性，都返回true
        */

       //声明一个对象
       let obj3 = {
            a : 1,
            b : {
                c: 2
            },
            e : function(){}
        }
        //检测a b  c   e  这些属性是否属于obj这个对象
        console.log(obj3.hasOwnProperty('a')); //true
        console.log(obj3.hasOwnProperty('b')); //true
        console.log(obj3.hasOwnProperty('c'));  //false
        console.log(obj3.hasOwnProperty('e'));  //true
        console.log(obj3.b.hasOwnProperty('c')); //true

        //继承过来的属性
        // toString()  
        console.log([].hasOwnProperty('toString')); //false
        console.log(new Object().hasOwnProperty('toString')); //false (toString是Object原型对象的方法，不是实例方法)
        console.log('toString' in Object);  //true (in: 无论这个属性是实例属性还是原型属性，它都属于这个对象的属性，所以返回true);
        console.log(new Object().__proto__.hasOwnProperty('toString')); //true

        let object3 = {
            a : 1,
            b : {
                c : 2,
                d : {
                    e : 3
                }
            }
        }
        //添加原型属性
        object3.__proto__.x = 4;
        object3.__proto__.y = 5;
        //检测object对象中有哪些属性
        //遍历当前对象
        for(let key in object3){
            //key : 就代表当前对象中的属性名
            //检测当前属性是否属于object对象
            if(object3.hasOwnProperty(key)){
                console.log(key,object3[key]); //输出属性名与属性值
            }
            alert(key);
        }
    </script>