理解数据代理 Object.defineProperty 这就是数据代理

最新推荐文章于 2022-07-14 09:13:53 发布

艾米家的猫儿（傻钢）

最新推荐文章于 2022-07-14 09:13:53 发布

阅读量101

点赞数

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

本文链接：https://blog.csdn.net/qq_731335498/article/details/120768291

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

示意图
在这里插入图片描述

<!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>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id='root'>
        <!-- <h1>hello {{name}} {{$mount}}</h1> -->
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        let num = 20
        let person = {
            name:'钢弹',sex:'males'
        }
        Object.defineProperty(
            person,
            'age',
            {
                // value:18,
                // enumerable:true,  // 支持枚举，枚举就是可遍历啥的，不然新增属性，遍历不出来！
                // writable:true,    // 控制属性是否能被 修改
                // configurable:true,// 控制属性是否能删除
                get(){
                  console.log('有人访问了person就会触发这个方法，从而让  = num')
                  return num;  
                },
                set(value){
                	console.log('有人修改person中的age的值，从而把num等于这个值')
                    num = value
                }
            }
        )
        console.log(person)
    </script>
</body>
</html>

第二个列子：person1中的age跟person2中一致

let person1 = {
            name:'zhangsan'
        } 
        let person2 = {
            name:'lisi',age:4
        }
        Object.defineProperty(person1,'age',{
            get(){
                return person2.age
            },
            set(value){
                person2.age = value
            }
        })