Vue 07 - Object.defineProperty介绍

大力pig

已于 2023-04-01 21:03:06 修改

阅读量83

点赞数

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

于 2023-04-01 21:00:02 首次发布

本文链接：https://blog.csdn.net/m0_53753920/article/details/129902814

版权

js 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

轻松理解

字面意思Object.defineProperty是定义一个属性。在定义对象的时候，我们不仅可以把属性直接放在对象内，也可以通过defineProperty去添加。

关键字介绍:

value	要添加属性的值
enumerable	控制属性是否可以枚举，默认值是false
writable	控制属性是否能被修改，默认值是false
configurable	控制属性是否能被删除，默认是false

传统添加对象属性的方法：

    let person = {
        name:'张三',
        sex:'男'
    }

通过defineProperty去添加属性的方法。

    Object.defineProperty(person, 'age', {
        value:number,
        enumerable:true, //控制属性是否可以美剧，默认值是false
        writable:true, //控制属性是否能被修改，默认值是false
        })

getter和setter介绍

通过defineProperty去添加属性的时候，也可以更加灵活的用getter和setter的方法去读取和修改。

这样在浏览器的控制台可以通过get和set的方法去操作数据。

        get(){
            console.log('有人读取age属性了')
            return number
        },
        //
        set(value){
            console.log('有人修改了age的属性值，且值是')
            number = value
        }

全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<script type="text/javascript">
    let number = 18;
    let person = {
        name:'张三',
        sex:'男'
    }
    // age的属性不参与遍历，不能枚举。
    Object.defineProperty(person, 'age', {
        // value:number,
        // enumerable:true, //控制属性是否可以美剧，默认值是false
        // writable:true, //控制属性是否能被修改，默认值是false
        // configurable:true //控制属性是否能被删除，默认是false
        //
        //当有人读取person的age属性时， get函数就会被调用，且返回值就是age的值
        get(){
            console.log('有人读取age属性了')
            return number
        },
        //
        set(value){
            console.log('有人修改了age的属性值，且值是')
            number = value
        }


    })

    console.log(person)
</script>
<div id="root">

</div>

</body>
<script>
    Vue.config.productionTip = false// 阻止vue在启动时生成生产提示

</script>
</html>

大力pig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 07 - Object.defineProperty介绍

通过defineProperty去添加属性的时候，也可以更加灵活的用getter和setter的方法去读取和修改。这样在浏览器的控制台可以通过get和set的方法去操作数据。get(){console.log('有人读取age属性了')},//console.log('有人修改了age的属性值，且值是')
复制链接

扫一扫