理解Object.defineProperty()

一、Object.defineProperty()语法说明

Object.defineProperty()的作用就是在一个对象上定义一个新属性，或者修改一个已经存在的属性
Object.defineProperty(obj , prop , desc)
obj：需要定义属性的当前对象
prop：当前需要定义的属性名
desc：属性描述符

    <script>
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 19
        })
        console.log(person);//{name: '张三', sex: '男', age: 19}
    </script>

二、属性描述符

1、writable是否只读

注意：当前使用了writable和value属性，不允许使用getter和setter这两个方法

writable：控制属性是否可以被修改（是否只读），默认为false

    <script>
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 19,
            writable: true,//控制属性是否可以被修改，默认值是false
        })
        console.log(person); //{name: '张三', sex: '男', age: 19}
        person.age = 20
        console.log(person);//{name: '张三', sex: '男', age: 20}
    </script>

2、enumerable是否可枚举

描述属性是否会出现在for in或者Object.keys()的遍历中
控制属性是否可枚举，默认值是false

Object.keys(obj)
参数：要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组

    <script>
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 19,
            writable: true, //控制属性是否可以被修改，默认值是false

        })
        let key = Object.keys(person)
        console.log(key);//['name', 'sex']
    </script>

enumerable: true

    <script>
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 19,
            writable: true, //控制属性是否可以被修改，默认值是false
            enumerable: true
        })
        let key = Object.keys(person)
        console.log(key); //(3) ['name', 'sex', 'age']
    </script>

3、configurable是否可以删除

configurable：控制属性是否可以被删除，默认值是fasle

    <script>
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 19,
            writable: true, //控制属性是否可以被修改，默认值是false
            enumerable: true, //控制属性是否可以被枚举，默认值是false
        })

        let de = delete person.age
        console.log(person);//{name: '张三', sex: '男', age: 19}
    </script>

configurable: true

    <script>
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 19,
            writable: true, //控制属性是否可以被修改，默认值是false
            enumerable: true, //控制属性是否可以被枚举，默认值是false
            configurable: true,//控制属性是否可以被删除，默认值是false
        })

        let de = delete person.age
        console.log(person); //{name: '张三', sex: '男'}
    </script>

4、getter和setter

当设置或获取对象的某个属性的值的时候，可以提高getter和setter方法
getter是一种获得属性值的方法
setter是一种设置属性值的方法

    <script>
        let number = 20
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            // 当有人读取person的age属性时候，get函数（getter）就会被调用，且返回值就是age的值
            // get: function() {->简写
            get() {
                return number;
            },
            // 当有人修改person的age属性的时候，set函数（setter）就会被调用，且会收到修改的具体值
            set(value) {
                console.log('有人修改了age属性,且值', value);
                number = value
            }
        })
    </script>

三、修改属性值

①当configurable：false和writable：true
可以通过定义属性修改值也可以通过赋值的形式修改值

    <script>
        let person = {
                name: '张三',
                sex: '男'
            }
            /* 通过属性定义的形式修改值 */
        Object.defineProperty(person, 'name', {
            value: '李四',
            writable: true, //控制属性是否可以被修改，默认值是false
            configurable: false, //控制属性是否可以被删除，默认值是false
        })


        console.log(person); //{name: '李四', sex: '男'}
        /* 通过赋值的形式修改值 */
        let name = '王五'
        person.name = name
        console.log(person); //{name: '王五', sex: '男'}
    </script>

②当configurable：true和writable：false
可以通过定义属性修改值单数不能通过赋值的形式修改值

    <script>
        let person = {
                name: '张三',
                sex: '男'
            }
            /* 通过属性定义的形式修改值 */
        Object.defineProperty(person, 'name', {
            value: '李四',
            writable: false, //控制属性是否可以被修改，默认值是false
            configurable: true, //控制属性是否可以被删除，默认值是false
        })


        console.log(person); //{name: '李四', sex: '男'}
        /* 通过赋值的形式修改值 */
        let name = '王五'
        person.name = name
        console.log(person); //{name: '李四', sex: '男'}
    </script>