何为 Object.defineProperty()

语法说明

Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性

Object.defineProperty(obj, prop, desc)

obj ：要定义属性的对象
prop ：当前需要定义的属性
desc ：配置项（可以写很多的配置：value）

在 person 对象中添加属性 age ，其值为 18 使用如下

Object.definProperty(person, 'age', {value: 18})

基本配置项

value ：属性对应的值
enumerable ：控制属性是否可以枚举，默认为 false
writable ：控制数据是否可以修改,默认为 false
configurable ：控制属性是否可以删除，默认为false

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    let person = {
        name: '张三',
        sex: '男',
    }

    Object.defineProperty(person, 'age', {
        value: 18,
        // 基本的配置项
        enumerable: false,// 控制属性是否可以枚举，默认为 false
        writable: true,// 控制数据是否可以修改,默认为 false
        configurable: true,// 控制属性是否可以删除，默认为false
    })
    
    // 这里使用 Object.keys() 检测属性是否可以枚举
    console.log(Object.keys(person))

    console.log(person)
</script>

</body>
</html>

关于 Object.keys() 方法：返回一个由给定对象的自身可枚举属性组成的数组

运行结果

高级配置项

get ：读取属性调用 getter
set ：写入属性调用 setter

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    let number = 18
    let person = {
        name: '张三',
        sex: '男',
    }

    Object.defineProperty(person, 'age', {
        // 高级的配置项
        // 当读取 person 的 age 属性时，get（getter）函数会调用，且返回 age 的值
        get() {
            console.log('有人读取 age 属性')
            return number
        },

        // 当修改 person 的 age 属性是，ser（setter）函数会调用，且会收到具体的值，更改 age 的值
        set(value) {
            console.log('有人修改 age 属性，其值为：', value)
            number = value
        }
    })

    console.log(person)
</script>

</body>
</html>

运行结果

posted @ 2022-04-02 19:55 春暖花开鸟阅读(67) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue 中的数据代理

· 何为数据代理

· Vue学习笔记9--Object.defineProperty()

· Object.defineProperty用法

· Object.defineproperty

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？