Object.defineProperty用法

nine小麦

已于 2022-08-19 14:57:18 修改

阅读量216

点赞数

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

于 2022-08-19 14:56:09 首次发布

原文链接：https://blog.youkuaiyun.com/MoXinXueWEB/article/details/122533485

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了JavaScript中Object.defineProperty的数据属性，包括configurable、enumerable、writable、value、get和set。get用于获取属性值，set用于设置属性值。通过示例展示了如何使用这些属性创建具有自定义存取行为的对象属性。强调了在严格模式下，getter和setter必须同时存在，以及不能同时使用数据描述符和存取描述符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Object.defineProperty的属性

一、数据属性
（1）configurable：当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除，默认为 false。可见它不仅控制了该属性是否可被删除，而且控制了属性描述符是否能改变
（2）enumerable：表示该属性是否可枚举，即是否通过for-in循环或Object.keys()返回属性，如果直接使用字面量定义对象，默认值为false。
（3）writable：能否修改属性的值，如果直接使用字面量定义对象，默认值为false。
（4）value：该属性对应的值，默认为undefined。
（5）get：一个给属性提供 getter 的方法(访问对象属性时调用的函数,返回值就是当前属性的值)，如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined
（6）set：一个给属性提供 setter 的方法(给对象属性设置值时调用的函数)，如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。

// 定义一个对象obj
let obj = {}
// 定义一个变量a
let a = 1;
// 定义一个变量b
let b;
//为obj对象设置一个m属性
Object.defineProperty(obj, 'm', {
    configurable: true,
    enumerable: true,
    //添加存取属性，当读取属性值时，调用get方法
    get() {
        return a + 1;
    },
    //当设置属性时，调用set方法
    set(i) {
        a = i + 2;
        b = i + 1;
    }
})
console.log(obj.m); //调用属性的get方法，结果为2
//为属性从新设置一个值，此时会调用set方法
obj.m = 4; //参数i的值就是4

注意:
1.getter和setter可以不同时使用,但在严格模式下只其中一个,会抛出错误
2.数据描述符与存取描述符不可混用,会抛出错误

value不能和get和set同时使用。如下：

let obj = {}
let a = 1;
let b ;
Object.defineProperty(obj, 'm', {
    value:'123',//切记不能使用value和get,set同时使用，会报错
    get() {
        return a;
    },
    set(i) {
        b = i + 1;
    }
})

set是给属性赋值，get是取属性的值，get是得到一般是要返回的 set 是设置不用返回

————————————————
版权声明：本文为优快云博主「MoXinXueWEB」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/MoXinXueWEB/article/details/122533485