数据代理——defineProperty

原创于 2023-01-20 21:22:14 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

Vue学习专栏收录该内容

63 篇文章

订阅专栏

该代码示例展示了如何使用JavaScript的Object.defineProperty方法为对象添加一个受控属性age。这个属性具有get和set函数，允许对访问和修改age值时进行控制。get函数返回一个变量number的值，而set函数则在age值改变时记录日志并更新number的值。

<body>
    <script>
        let number=18
        let person ={
            name:'张三',
            sex:'man',
        }
        //可以对追加的内容进行权限控制
        Object.defineProperties(person,'age',{
            //value:18,
            //enumerable:true,//控制是否可以枚举，默认为false
            //writable:true,//控制是否可以被修改，默认不能被修改
            //configurable:true//控制是否可以被删除，默认不能
            //当有人读取person的age时，get函数（getter）就会被调用，且返回值就是age的值
            get(){
                return number
            },
            //当有人修改person的age时，set函数（setter）就会被调用，且会收到具体修改信息
            set(value){
                console.log('有人修改了age值,且值是',value)
                number=value
            }
        })
    </script> 
</body>