Vue 2.x – 回顾Object.defineproperty()方法

Object.defineproperty方法

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,其添加的属性在一般情况下不能被枚举,删除,修改

用法:

Object.defineProperty(obj, prop, desc)
<script>
        let person = {
            name: "张三",
            sex: "男",
            age: 18
        }
        console.log("person", Object.keys(person));
        console.log("person", person);

        let person2 = {
            name: "张三",
            sex: "男"
        }

        Object.defineProperty(person2, 'age', {
            value: 18
        })

        console.log("person2", Object.keys(person2));
        console.log("person2", person2);
    </script>

当然,在特定情况下,是可以删除,枚举,修改的

Object.defineProperty(person2, 'age', {
            value: 18,
            enumerable: true, // 控制属性是否可以枚举
            writable:true, // 控制属性是否可以被修改
            configurable:true, // 控制属性是否可以被删除
        })

 getter/setter用法

<script>
        let number = 18;
        let person2 = {
            name: "张三",
            sex: "男"
        }

        Object.defineProperty(person2, 'age', {
            // 当有人读取person的age是,get函数(getter)就会被调用
            get() {
                console.log("有人读取age属性了");
                return number
            },

            // 当有人修改person的age是,set函数(setter)就会被调用,且会收到修改值
            set(value) {
                console.log("有人修改了age值,修改内容为:", value);
                number = value
            }
        })
    </script>

更多资料深入浅出Object.defineProperty()

转载请注明出处,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>