6、数据代理之Object.definePrpperty方法回顾

饮马瀚海呐

已于 2022-10-30 12:00:16 修改

阅读量298

点赞数

分类专栏： Vue2 文章标签： javascript vue.js 前端

于 2022-10-23 11:32:06 首次发布

本文链接：https://blog.csdn.net/qq_44636569/article/details/127472535

版权

Vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在这里插入图片描述
number和person明明是两个东西，它就是借助defineProperty，让其之间产生关联。值是现用现取。取是get，改是set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 定义属性方法 -->
    <title>回顾Object.defineproperty方法</title>
    
</head>
<body>
    <script>
        number=20
        let person={    // let声明的范围是块作用域，是局部变量；而var声明的范围是函数作用域，是全局变量
            name:'张三',
            sex:'男',
        }
        
        //给person对象再添加一个age属性，值为18
        Object.defineProperty(person,'age',{    //虽然写法复杂，但是可以对追加的属性能枚举、修改和删除
            //value:18,
            // enumerable:true,     // 可枚举的，控制属性是否可以枚举，默认值是false       console.log(Object.keys(person))
            // writable:true,      //控制属性是否可以被修改，默认值是false     person.age=19
            // configurable:true,   //控制属性是否可以被删除，默认值是false     delete person.age

        
        
             //这是vue的双向绑定原理
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                console.log('有人读取age属性了')
                return number
            },

             //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
             set(value){
                console.log('有人修改了age属性，且值是',value)
                number=value
             }



        })
        console.log(person)

        console.log(Object.keys(person))

        // for (let key in person) {
        //     console.log('@',person[key])
        // }
    </script>
</body>
</html>