国瑞前端
当前位置: Vue > Object.defineProperty数据描述

Object.defineProperty是Vue中一个核心功能,用来实现数据劫持,对数据进行处理,转换为get和set

作用:直接在一个对象上定义一个新属性,或者修改一个对象的现有属性

语法:Object.defineProperty(obj,prop,descriptor)

参数:

obj要在其上定义属性的对象

prop要定义或修改的属性的名称

descriptor将被定义或修改的属性描述符

数据描述:

configurable 是否可以删除目标属性, 默认为false

enumerable 此属性是否可以被枚举(遍历),默认为false

value 该属性对应的值,默认为undefined

writable 属性的值是否可以被重写,默认为false

访问器描述:

getter是一种获得属性值的方法

setter是一种设置属性值的方法

可以写configurable、enumerable、

不能写value、writable

采用数据描述的方式修改数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    </style>
</head>

<body>
</body>

</html>
<script type="text/javascript">
    //使用数据的时候,对数据进行劫持(代理)
    //使用Object.defineProperty劫持属性,把属性转换成访问器的方式
    /*
        getter  获取属性触发的
        setter  设置属性触发的
     */

    let data = {
        title: 'blog'
    };

    //定义属性,也可在原有的属性上描述(添加新的属性)
    Object.defineProperty(data, 'myBlog', {
        value: 'huanggr.cn',
    })
    //改变对象的属性值
    Object.defineProperty(data, 'title', {
        value: '改变你的属性值',
        configurable: false, //该属性是否可以被删除
        //enumerable:false,  //是否可以被枚举
        writable: false //设置false,不允许重新改
    })
    //writable为false表示在外面不能够改变值
    data.title = "最后一次改变的值";
    console.log(data);

    //所谓枚举,实质上相当于遍历
    for (let attr in data) {
        console.log(attr);
    }
    //删除对象的属性
    delete data.title
    console.log(data); //configurable:false,  //该属性是否可以被删除

    //这个为数据描述,下面的一个为访问器描述
</script>

采用访问器方式修改数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    </style>
</head>

<body>

</body>

</html>
<script type="text/javascript">
    //使用数据的时候,对数据进行劫持(代理)
    //使用Object.defineProperty劫持属性,把属性转换成访问器的方式
    /*
        getter  获取属性触发的
        setter  设置属性触发的
     */

    let data = {
        title: 'blog'
    };

    //定义属性,也可在原有的属性上描述(添加新的属性)
    Object.defineProperty(data, 'myBlog', {
        value: 'huanggr.cn'
    })
    //改变对象的属性值
    let val = "新的值";
    Object.defineProperty(data, 'title', {
        //set设置之后get会再次获取,后面的   "//"   表示的就是程序执行的顺序
        get() {
            console.log('我访问数据了'); //1  //5
            return val;
        },
        //不设置新值不会触发
        set(newValue) {
            console.log('我设置了新值'); //3
            console.log(newValue); //4
            val = newValue;
        }
    })
    console.log(data.title + "-------"); //2
    data.title = "111";
    console.log(data.title); //6
</script>

模仿Vue对数据进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>

</head>

<body>
    <div id="app">
        <button type="" id="btn">改变数据</button>
        <h2 id="title">这是标题</h2>
    </div>
</body>

</html>
<script type="text/javascript">
    var data = {
        title: "新闻",
        myBlog: 'huanggr.cn'
    };

    //
    observer(data);

    function observer(obj) {
        //Object.keys  拿到该对象上面的所有的key值
        Object.keys(obj).forEach((item) => {
            console.log(item + "======item");
            defineReactive(obj, item, obj[item])
        })
    }

    function defineReactive(obj, key, value) {
        Object.defineProperty(obj, key, {
            get() {
                return value;
            },
            set(newValue) {
                value = newValue;
                //title变化,触发set,然后赋值
                title.innerHTML = newValue;

            }
        })
    }

    console.log(data);

    title.innerHTML = data.title;

    btn.onclick = function () {
        data.title = "数据变化了";
    }
</script>

一些方法

删除对象属性

1
2
delect data.title           //删除data对象的title属性
Object.keys(data)        //获取data对象所有的下标

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"Object.defineProperty数据描述"

最新评论

    暂无留言哦~~

博客简介

国瑞个人博客: https://www.huanggr.cn/,我们关注Web前端开发技术,web前端开发,移动前端开发,前端资讯,同时分享前端资源和工具等,期待你的参与,了解更多..

博主独立研发主题:

广告

广告

广告

广告

精彩评论

广告

站点统计

  • 文章总数: 334 篇
  • 草稿数目: 86 篇
  • 分类数目: 28 个
  • 独立页面: 5 个
  • 评论总数: 108 条
  • 链接总数: 10 个
  • 标签总数: 111 个
  • 注册用户: 176 人
  • 访问总量: 8,677,250 次
  • 最近更新: 2021年7月21日
服务热线:
 

 QQ在线交流

 旺旺在线