06.数据代理

最新推荐文章于 2024-07-25 21:13:00 发布

M丶GentleMan

最新推荐文章于 2024-07-25 21:13:00 发布

阅读量49

点赞数

分类专栏： Vue学习文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/ma628991/article/details/121390667

版权

Vue学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

01.回顾Obiect.defineProperty

<!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>
</head>

<body>
    <script>
        // 1.需求，让person中的age属性，跟num的值相对应。
        let number = 18;
        let person = {
            name: "mawei",
            sex: '男',
        }
        Object.defineProperty(person, 'age', {
            // 高级方式添加的，默认是不被枚举的（遍历）
            // value: 18,
            // 借助属性可实现被枚举。
            // enumerable: true,
            // 高级方式添加的，默认是不被修改的
            // writable: true,
            // 高级方式添加的，默认是不被删除的
            // configurable: true,

            // 当有人读取person的age属性时，get函数（getter）会被调用，返回的是age值
            get() {
                console.log('num被读取');
                return number;
            },
            // 当有人修改person的age属性时，set函数（setter）会被调用，收到修改的具体值。
            set(value) {
                console.log('num被修改');
                number = value
            }
        })
        console.log(person);
    </script>
</body>

</html>

02.何为数据代理

<!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>
</head>

<body>
    <script>
        // 数据代理：通过一个对象代理，对另外一个对象中的属性进行操作
        let obj = { x: 100 }
        let obj1 = { y: 200 }
        Object.defineProperty(obj1, 'x', {
            get() {
                return obj.x
            },
            set(value) {
                obj.x = value
            }
        })
    </script>
</body>

</html>